Les 30 sélecteurs CSS Que vous devez Mémoriser

Apprendre le CSS: Le Guide complet

Nous avons construit un guide complet pour vous aider à apprendre le CSS, que vous débutiez avec les bases ou que vous souhaitiez explorer des CSS plus avancés.

Sélecteurs CSS

Vous avez donc appris les sélecteurs de base id, class et

Sélecteurs de base

1. *

* { margin: 0; padding: 0;}

Éliminons les évidences, pour les débutants, avant de passer aux sélecteurs les plus avancés.

Le symbole en étoile ciblera chaque élément de la page. De nombreux développeurs utiliseront cette astuce pour éliminer les margin et padding. Bien que cela soit certainement bien pour les tests rapides, je vous conseille de ne jamais l’utiliser dans le code de production. Cela ajoute trop de poids au navigateur et est inutile.

Le * peut également être utilisé avec des sélecteurs enfants.

#container * { border: 1px solid black;}

Cela ciblera chaque élément qui est un enfant du #container div. Encore une fois, essayez de ne pas beaucoup utiliser cette technique, si jamais.

2. #X

#container { width: 960px; margin: auto;}

Préfixer le symbole de hachage à un sélecteur nous permet de cibler par id. C’est facilement l’utilisation la plus courante ; cependant, soyez prudent lorsque vous utilisez des sélecteurs id.

Demandez-vous: dois-je absolument appliquer un id à cet élément pour le cibler?Les sélecteurs

id sont rigides et ne permettent pas de les réutiliser. Si possible, essayez d’abord d’utiliser un nom de balise, l’un des nouveaux éléments HTML5, ou même une pseudo-classe.

3. .X

.error { color: red;}

Il s’agit d’un sélecteur class. La différence entre id s et class es est que, avec ce dernier, vous pouvez cibler plusieurs éléments. Utilisez class es lorsque vous souhaitez que votre style s’applique à un groupe d’éléments. Vous pouvez également utiliser id s pour trouver une aiguille dans une botte de foin et styliser uniquement cet élément spécifique.

4. X

a { color: red; }ul { margin-left: 0; }

Que se passe-t-il si vous souhaitez cibler tous les éléments d’une page, en fonction de leur type, plutôt qu’un nom id ou class? Restez simple et utilisez un sélecteur de type. Si vous devez cibler toutes les listes non ordonnées, utilisez ul {}.

Démonstration en direct des Sélecteurs de base

Sélecteurs Combinateurs

5. X Y

li a { text-decoration: none;}

Le sélecteur suivant le plus courant est le sélecteur descendant. Lorsque vous devez être plus précis avec vos sélecteurs, vous les utilisez. Par exemple, que se passe-t-il si, plutôt que de cibler toutes les balises d’ancrage, vous n’avez besoin que de cibler les ancres qui se trouvent dans une liste non ordonnée? C’est spécifiquement lorsque vous utiliseriez un sélecteur descendant.

Conseil de pro: Si votre sélecteur ressemble à X Y Z A B.error, vous le faites mal. Demandez-vous toujours s’il est absolument nécessaire d’appliquer tout ce poids.

6. X+Y

ul + p { color: red;}

Il s’agit d’un sélecteur adjacent. Il sélectionnera uniquement l’élément immédiatement précédé de l’élément précédent. Dans ce cas, seul le premier paragraphe après chaque ul aura du texte rouge.

7. X > Y

div#container > ul { border: 1px solid black;}

La différence entre la norme X Y et X > Y est que cette dernière ne sélectionnera que les enfants directs. Par exemple, considérez le balisage suivant.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

Un sélecteur de #container > ul ne ciblera que les ul qui sont des enfants directs du div avec un id de container. Il ne ciblera pas, par exemple, le ul qui est un enfant du premier li.

Pour cette raison, l’utilisation du combinateur enfant présente des avantages en termes de performances. En fait, il est recommandé en particulier lorsque vous travaillez avec des moteurs de sélection CSS basés sur JavaScript.

8. X ~Y

ul ~ p { color: red;}

Ce combinateur frère est similaire à X + Y, mais il est moins strict. Alors qu’un sélecteur adjacent (ul + p) ne sélectionnera que le premier élément immédiatement précédé de l’ancien sélecteur, celui-ci est plus généralisé. Il sélectionnera, en se référant à notre exemple ci-dessus, tous les éléments p, tant qu’ils suivent un ul.

Démonstration en direct des Sélecteurs de Combinateur

Sélecteurs d’attributs

9. X

a { color: green;}

Appelé sélecteur d’attributs, dans notre exemple ci-dessus, cela ne sélectionnera que les balises d’ancrage qui ont un attribut title. Les balises d’ancrage qui ne le font pas ne recevront pas ce style particulier. Mais que se passe-t-il si vous devez être plus précis? Découvrez l’exemple suivant!

10. X

a { color: #83b348; /* Envato green */}

L’extrait ci-dessus stylisera toutes les balises d’ancrage qui sont liées à https://code.tutsplus.com; ils recevront notre couleur verte de marque. Toutes les autres balises d’ancrage resteront inchangées.

Notez que nous encapsulons la valeur entre guillemets. N’oubliez pas de le faire également lorsque vous utilisez un moteur de sélection CSS JavaScript. Lorsque cela est possible, utilisez toujours des sélecteurs CSS3 sur des méthodes non officielles.

Cela fonctionne bien, même si c’est un peu rigide. Que se passe-t-il si le lien se dirige effectivement vers Envato Tuts +, mais peut-être que le chemin est code.tutsplus.com plutôt que l’URL complète? Dans ces cas, nous pouvons utiliser un peu la syntaxe des expressions régulières.

11. X

a { color: #83b348; /* Envato green */}

Voilà ce dont nous avons besoin. L’étoile indique que la valeur en cours doit apparaître quelque part dans la valeur de l’attribut. De cette façon, cela couvre tutsplus.com , code.tutsplus.com , et même webdesign.tutsplus.com .

Gardez à l’esprit qu’il s’agit d’une déclaration générale. Que se passe-t-il si la balise d’ancrage est liée à un site non Envato avec la chaîne tutsplus dans l’URL? Lorsque vous devez être plus précis, utilisez ^ et $ pour référencer respectivement le début et la fin d’une chaîne.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

Vous êtes-vous déjà demandé comment certains sites Web peuvent afficher une petite icône à côté des liens externes? Je suis sûr que vous les avez déjà vus; ce sont de bons rappels que le lien vous dirigera vers un site Web entièrement différent.

Ceci est un jeu d’enfant avec le symbole carat. Il est le plus couramment utilisé dans les expressions régulières pour désigner le début d’une chaîne. Si nous voulons cibler toutes les balises d’ancrage qui ont un href qui commence par http, nous pourrions utiliser un sélecteur similaire à l’extrait de code ci-dessus.

Notez que nous ne recherchons pas https://; c’est inutile et ne tient pas compte des URL qui commencent par https://.

Maintenant, et si nous voulions plutôt styliser toutes les ancres qui renvoient, disons, à une photo? Dans ces cas, cherchons la fin de la chaîne.

13. X

a { color: red;}

Encore une fois, nous utilisons un symbole d’expressions régulières, $, pour désigner la fin d’une chaîne. Dans ce cas, nous recherchons toutes les ancres qui renvoient à une image — ou au moins une URL qui se termine par .jpg. Gardez à l’esprit que cela ne capturera pas d’images GIF et PNG.

14. X

a { color: red;}

Comment compenser tous les différents types d’images? Eh bien, nous pourrions créer plusieurs sélecteurs, tels que:

a,a,a,a { color: red;}

Mais c’est une douleur, et c’est inefficace. Une autre solution possible consiste à utiliser des attributs personnalisés. Et si nous ajoutions notre propre attribut data-filetype à chaque ancre qui renvoie à une image ?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Ensuite, avec ce crochet en place, nous pouvons utiliser un sélecteur d’attributs standard pour cibler uniquement ces ancres.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

En voici un spécial qui impressionnera vos amis. Pas trop de gens connaissent cette astuce. Le symbole tilde (~) nous permet de cibler un attribut qui a une liste de valeurs séparées par des espaces.

En accompagnant notre attribut personnalisé du numéro 15, ci-dessus, nous pourrions créer un attribut data-info, qui peut recevoir une liste séparée par des espaces de tout ce dont nous avons besoin pour prendre note. Dans ce cas, nous noterons les liens externes et les liens vers des images — juste pour l’exemple.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Avec ce balisage en place, nous pouvons maintenant cibler toutes les balises qui ont l’une de ces valeurs, en utilisant l’astuce de sélecteur d’attributs ~.

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

Plutôt chouette, hein ?

Démonstration en direct des Sélecteurs d’attributs

Pseudo-Sélecteurs

16. X : visité et X:lien

a:link { color: red; }a:visited { color: purple; }

Nous utilisons la pseudo-classe :link pour cibler toutes les balises d’ancrage sur lesquelles vous n’avez pas encore cliqué.

Alternativement, nous avons également la pseudo classe :visited, qui, comme vous vous en doutez, nous permet d’appliquer un style spécifique uniquement aux balises d’ancrage de la page sur lesquelles vous avez cliqué ou « visité ».

17. X: checked

input:checked { border: 1px solid black;}

Cette pseudo classe ne ciblera qu’un élément d’interface utilisateur qui a été coché – comme un bouton radio ou une case à cocher. C’est aussi simple que ça.

18. X: après

Les pseudo classes before et after sont géniales. Chaque jour, semble-t-il, les gens trouvent de nouvelles façons créatives de les utiliser efficacement. Ils génèrent simplement du contenu autour de l’élément sélectionné.

Beaucoup ont été introduits pour la première fois dans ces classes lorsqu’ils ont rencontré le hack clear-fix.

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

Ce hack utilise la pseudo classe :after pour ajouter un espace après l’élément, puis l’effacer. C’est une excellente astuce à avoir dans votre sac à outils, en particulier dans les cas où la méthode overflow: hidden; n’est pas possible.

Pour une autre utilisation créative de ceci, reportez-vous à mon conseil rapide sur la création d’ombres.

Selon la spécification des sélecteurs CSS3, vous devez techniquement utiliser la syntaxe pseudo-élément de deux deux-points ::. Cependant, pour rester compatible, l’agent utilisateur acceptera également une seule utilisation de deux points.

19. X: survolez

div:hover { background: #e3e3e3;}

Oh allez. Tu connais celui-là. Le terme officiel pour cela est « pseudo-classe d’action utilisateur ». Cela semble déroutant, mais ce n’est vraiment pas le cas. Vous voulez appliquer un style spécifique lorsqu’un utilisateur survole un élément? Cela fera le travail!

Gardez à l’esprit que les anciennes versions d’Internet Explorer ne répondent pas lorsque la pseudo-classe :hover est appliquée à autre chose qu’une balise d’ancrage.

Vous utiliserez le plus souvent ce sélecteur lors de l’application, par exemple, d’un border-bottom aux balises d’ancrage, lorsqu’elles sont survolées.

a:hover { border-bottom: 1px solid black;}

Conseil de pro: border-bottom: 1px solid black; semble mieux que text-decoration: underline;.

20. X : non (sélecteur)

div:not(#container) { color: blue;}

La pseudo-classe de négation est particulièrement utile. Disons que je veux sélectionner tous les div s, à l’exception de celui qui a un id de container. L’extrait ci-dessus gérera parfaitement cette tâche.

Ou, si je voulais sélectionner chaque élément (non conseillé) à l’exception des balises de paragraphe, nous pourrions le faire:

*:not(p) { color: green;}

21. X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

Nous pouvons utiliser des pseudo-éléments (désignés par ::) pour styliser des fragments d’un élément, tels que la première ligne ou la première lettre. Gardez à l’esprit que ceux-ci doivent être appliqués aux éléments de niveau bloc pour prendre effet.

Un pseudo-élément est composé de deux deux-points: ::

Cibler la première lettre d’un paragraphe

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Cet extrait est une abstraction qui trouvera tous les paragraphes de la page, puis ne sous-ciblera que la première lettre de cet élément.

Ceci est le plus souvent utilisé pour créer un style semblable à un journal pour la première lettre d’un article.

Cible la Première Ligne d’un paragraphe

p::first-line { font-weight: bold; font-size: 1.2em;}

De même, le pseudo-élément ::first-line stylisera, comme prévu, la première ligne de l’élément uniquement.

 » Pour la compatibilité avec les feuilles de style existantes, les agents utilisateurs doivent également accepter la notation précédente à un point pour les pseudo-éléments introduits dans les niveaux CSS 1 et 2 (à savoir, :first-line, :first-letter, :before et :after). Cette compatibilité n’est pas autorisée pour les nouveaux pseudo-éléments introduits dans cette spécification. » – Spécifications des sélecteurs W3C

Démonstration en direct des Pseudo-Sélecteurs

Nième Enfant et Sélecteurs de type

22. X : nième enfant (n)

li:nth-child(3) { color: red;}

Rappelez-vous les jours où nous n’avions aucun moyen de cibler des éléments spécifiques dans une pile? La pseudo classe nth-child résout cela!

Veuillez noter que nth-child accepte un entier comme paramètre, mais ce n’est pas basé sur zéro. Si vous souhaitez cibler le deuxième élément de liste, utilisez li:nth-child(2).

Nous pouvons même l’utiliser pour sélectionner un ensemble variable d’enfants. Par exemple, nous pourrions faire li:nth-child(4n) pour sélectionner un élément de liste sur quatre.

23. X : nième-dernier-enfant (n)

li:nth-last-child(2) { color: red;}

Et si vous aviez une énorme liste d’articles dans un ul, et que vous n’aviez besoin que d’accéder, disons, au troisième au dernier article? Plutôt que de faire li:nth-child(397), vous pouvez plutôt utiliser la pseudo classe nth-last-child.

Cette technique fonctionne presque de manière identique au numéro 16 ci-dessus. La différence est qu’elle commence à la fin de la collection et remonte.

24. X : nième du type (n)

ul:nth-of-type(3) { border: 1px solid black;}

Il y aura des moments où, plutôt que de sélectionner un child, vous devrez plutôt sélectionner en fonction du type de l’élément.

Imaginez un balisage contenant cinq listes non ordonnées. Si vous vouliez styliser uniquement le troisième ul et que vous n’aviez pas de id unique à connecter, vous pouvez utiliser la pseudo classe nth-of-type(n). Dans l’extrait ci-dessus, seul le troisième ul aura une bordure autour.

25. X : nième-dernier-du-type (n)

ul:nth-last-of-type(3) { border: 1px solid black;}

Et oui, pour rester cohérent, nous pouvons également utiliser nth-last-of-type pour commencer à la fin de la liste des sélecteurs et revenir pour cibler l’élément souhaité.

26. X: premier enfant

ul li:first-child { border-top: none;}

Cette pseudo-classe structurelle nous permet de cibler uniquement le premier enfant du parent de l’élément. Vous l’utiliserez souvent pour supprimer les bordures des premier et dernier éléments de la liste.

Par exemple, disons que vous avez une liste de lignes, et chacune a un border-top et un border-bottom. Eh bien, avec cet arrangement, le premier et le dernier élément de cet ensemble auront l’air un peu étrange.

De nombreux concepteurs appliquent les classes first et last pour compenser cela. Au lieu de cela, vous pouvez utiliser ces pseudo-classes.

27. X: last-child

ul > li:last-child { color: green;}

L’opposé de first-child, last-child ciblera le dernier élément du parent de l’élément.

last-child Exemple de sélecteur

Construisons un exemple simple pour démontrer une utilisation possible de ces classes. Nous allons créer un élément de liste stylisé.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

Pour le balisage, il n’y a rien de spécial: juste une simple liste.

Voici le CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

Ce style définira un arrière-plan, supprimera le remplissage par défaut du navigateur sur le ul et appliquera des bordures à chaque li pour fournir un peu de profondeur.

Pour ajouter de la profondeur à vos listes, appliquez un border-bottom à chaque li qui est une nuance ou deux plus foncée que la couleur d’arrière-plan du li. Ensuite, appliquez un border-top qui est un couple de nuances plus claires.

Le seul problème, comme indiqué dans l’image ci—dessus, est qu’une bordure sera appliquée tout en haut et en bas de la liste non ordonnée – ce qui semble étrange. Utilisons les pseudo classes :first-child et :last-child pour résoudre ce problème.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

Voilà; ça corrige!

28. X: only-child

div p:only-child { color: red;}

Honnêtement, vous ne vous retrouverez probablement pas à utiliser trop souvent la pseudo-classe only-child. Néanmoins, il est disponible, si vous en avez besoin.

Il vous permet de cibler des éléments qui sont le seul enfant de son parent. Par exemple, en faisant référence à l’extrait de code ci-dessus, seul le paragraphe qui est le seul enfant de div sera coloré en rouge.

Supposons le balisage suivant.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

Dans ce cas, les paragraphes du deuxième div ne seront pas ciblés ; seul le premier div. Dès que vous appliquez plus d’un enfant à un élément, la pseudo classe only-child cesse de prendre effet.

29. X:only-of-type

li:only-of-type { font-weight: bold;}

Cette pseudo-classe structurelle peut être utilisée de manière intelligente. Il ciblera les éléments qui n’ont pas de frères et sœurs dans son conteneur parent. Par exemple, ciblons tous les ul qui n’ont qu’un seul élément de liste.

Tout d’abord, demandez-vous comment vous accompliriez cette tâche. Vous pouvez faire ul li, mais cela ciblerait tous les éléments de la liste. La seule solution est d’utiliser only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

La pseudo-classe first-of-type vous permet de sélectionner les premiers frères et sœurs de son type.

Un test

Pour mieux comprendre cela, faisons un test. Copiez le balisage suivant dans votre éditeur de code:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Maintenant, sans lire plus loin, essayez de comprendre comment cibler uniquement « l’élément de liste 2 ». Lorsque vous l’avez compris (ou abandonné), lisez la suite.

Solution 1

Il existe différentes façons de résoudre ce test. Nous en examinerons une poignée. Commençons par utiliser first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

Cet extrait dit essentiellement, pour trouver la première liste non ordonnée sur la page, puis ne trouvez que les enfants immédiats, qui sont des éléments de liste. Ensuite, filtrez cela uniquement au deuxième élément de liste de cet ensemble.

Solution 2

Une autre option consiste à utiliser le sélecteur adjacent.

p + ul li:last-child { font-weight: bold;}

Dans ce scénario, nous trouvons le ul qui procède immédiatement à la balise p, puis trouvons le tout dernier enfant de l’élément.

Solution 3

Nous pouvons être aussi odieux ou aussi ludiques que nous le souhaitons avec ces sélecteurs.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Cette fois, nous prenons le premier ul sur la page, puis trouvons le tout premier élément de liste, mais en commençant par le bas!

Démonstration en direct du Nième enfant et des sélecteurs de type

Conclusion

Si vous compensez les navigateurs plus anciens, comme Internet Explorer 6, vous devez toujours faire attention lorsque vous utilisez ces sélecteurs plus récents. Mais ne laissez pas cela vous dissuader de les apprendre. Tu te ferais un énorme tort à toi-même. Assurez-vous de consulter ici une liste de compatibilité du navigateur. Alternativement, vous pouvez utiliser l’excellent IE9 de Dean Edward.script js pour apporter la prise en charge de ces sélecteurs aux navigateurs plus anciens.

Deuxièmement, lorsque vous travaillez avec des bibliothèques JavaScript, comme la populaire jQuery, essayez toujours d’utiliser ces sélecteurs CSS3 natifs sur les méthodes / sélecteurs personnalisés de la bibliothèque, lorsque cela est possible. Cela accélérera votre code, car le moteur de sélection peut utiliser l’analyse native du navigateur, plutôt que la sienne.

C’est génial que vous passiez du temps à apprendre les bases de la conception Web, mais si vous avez besoin d’une solution rapide, l’un de nos modèles CSS prêts à l’emploi pourrait être une bonne option. Nous avons également quelques éléments CSS premium à considérer.

• 
  CSS3
  15 Tableaux de Tarification CSS Élégants pour Votre Dernier Projet Web
  Monty Shokeen
• 
  Bootstrap 4
  18 Meilleurs plugins Bootstrap 4
  Monty Shokeen

Accès gratuit à Envato Elements pendant 1 mois

Enfin, voici une offre très spéciale pour vous aider à créer des sites et des applications d’apparence professionnelle. En plus d’utiliser ces sélecteurs CSS, pourquoi ne pas profiter de photos de stock de haute qualité, de séquences vidéo, de polices premium, de graphiques, d’illustrations et plus encore?

Normalement, vous devez payer pour de telles ressources. Mais à l’heure actuelle, vous pouvez accéder gratuitement à des millions d’actifs créatifs pour vos projets de codage pendant un mois entier. Et de plus, vous obtenez des téléchargements illimités, vous pouvez donc en récupérer autant que vous le souhaitez pendant ce mois, et ne payer que si vous décidez de continuer!

Pour profiter de cette offre, cliquez sur ce lien d’inscription spécial ou entrez le code ci-dessous sur la page d’inscription:

elements_cont_tuts-freemonth1-4bwkbp

N’attendez pas trop longtemps — l’offre n’est valable que pour une durée limitée!