This page has been robot translated, sorry for typos if any. Original content here.

Sélecteurs CSS au quotidien

CSS-селекторы, нужные на каждый день

Ainsi, le sélecteur est une description formelle de l'élément ou du groupe d'éléments auquel s'applique la règle de style spécifiée. Un sélecteur simple est un sélecteur de type, un sélecteur de classe ou un sélecteur d'identifiant, pouvant être suivi de sélecteurs de pseudo-classes et de sélecteurs d'attributs (les derniers dans cette brève description sont silencieux). Un sélecteur est une séquence de sélecteurs simples, séparés par des espaces ou les caractères ">" et "+" . Ces séparateurs ont une signification pratique lors de la création de sites Web et sont conçus pour des raisons de commodité.

Bien que bon nombre des sélecteurs mentionnés ici soient inclus dans la spécification CSS3 et, par conséquent, ne soient pris en charge que par les navigateurs modernes, vous devez tout de même vous familiariser avec eux et les garder en mémoire, car ils sont très pratiques et pratiques.

CSS-селекторы, нужные на каждый день

Types de sélecteurs

Sélecteur de balises , le sélecteur est le nom de la balise pour laquelle vous souhaitez modifier les propriétés.

Sélecteur universel , désigné par le symbole * et utilisé pour modifier les propriétés nécessaires de tous les éléments de la page.

Les classes sont appliquées aux éléments avec un attribut de classe et une valeur requise.

Les identifiants sont utilisés pour les éléments avec l'attribut id et la valeur requise. La principale différence entre les classes et les identifiants réside dans le fait que les seconds noms doivent être uniques et non répétés, ce qui leur permet d'être utilisés conjointement avec des scripts (JavaScript).

Les pseudo-classes sont conçues pour modifier le style des éléments de page existants en fonction de leur état dynamique, par exemple lors de l'utilisation de liens ( : lien ,: visité ,: survol,: actif ,: focus ). Les pseudo-éléments définissent le style des éléments qui ne sont pas clairement définis dans la structure du document ( : première lettre,: première ligne ) et permettent également de générer et de styliser un contenu inexistant ( : before ,: after et la propriété content ). En CSS3, les pseudo-éléments commencent par deux deux points :: ( :: :: première lettre , :: première ligne , :: avant , :: après ).

Sélecteurs d'attributs . Ils permettent de styliser un élément non seulement par la valeur de la balise, mais également par la valeur de l'attribut (a [attr]).

Sélecteurs de contexte . Éléments de style à l'intérieur d'un autre élément (ab).

Sélecteurs d'enfants . Stylisation d'un élément situé immédiatement après un autre élément et en étant son descendant direct (a> b).

Sélecteurs de voisin . Conçu pour styliser les éléments voisins ayant un parent commun. (a + b)

Sélecteurs associés . Ils sont similaires aux sélecteurs voisins, mais à la différence que tous les éléments voisins sont stylisés et pas seulement le premier élément voisin. Apparu pour la première fois en CSS3. (a ~ b).

Alors commençons!

*

  * {
  marge: 0;
  rembourrage: 0;
  }
 

Commençons par les choses les plus simples pour les débutants avant de passer aux sélecteurs avancés.

Le symbole étoile vous permet de sélectionner tous les éléments de la page. De nombreux développeurs Web l'utilisent pour "réinitialiser" tous les retraits internes et externes.

Vous pouvez également utiliser le symbole * pour les enfants d'un objet.

  #container * {
  bord: 1px noir solide;
  }
 

Ce code cible tous les éléments qui sont des enfants du bloc avec le conteneur d'identifiant.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

#X

  #container {
  largeur: 960px;
  marge: auto;
  }
 

Le caractère de réseau nous permet de sélectionner des éléments par identifiant. C'est l'un des moyens les plus courants de sélectionner des éléments, mais soyez prudent lorsque vous l'utilisez.

"Posez-vous la question suivante: Dois-je vraiment utiliser un identifiant pour que certains éléments s'y réfèrent?"

Les sélecteurs d'identités sont inflexibles et difficiles à réutiliser dans différents projets. Si possible, essayez d’abord d’utiliser le nom de la balise ou même la pseudo-classe.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

.X

  .error {
  couleur: rouge;
  }
 

Ceci est un sélecteur de classe. La différence entre id et classes est qu'avec l'aide des classes, vous pouvez sélectionner plusieurs éléments à la fois. Utilisez des classes si vous devez appliquer un style à un groupe d'éléments.

Sinon, utilisez id pour rechercher les «aiguilles dans une botte de foin» et appliquez le style à un seul objet.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Xy

  li a {
  texte-décoration: aucun;
  }
 

Le type de sélecteur suivant le plus fréquemment utilisé est le sélecteur enfant. Il doit être utilisé lorsque vous devez effectuer une sélection plus précise des éléments.

Par exemple, que se passe-t-il si vous ne devez pas sélectionner toutes les balises de lien, mais uniquement celles qui figurent dans une liste non ordonnée? C'est le cas lorsque vous devez utiliser un sélecteur d'enfants.

"Astuce: si votre sélecteur ressemble à XYZA B.error, alors vous faites probablement quelque chose comme ça. Demandez-vous toujours si c'est la façon la plus simple."
Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X

  un {couleur: rouge;}
  ul {margin-left: 0px;}
 

Que faire si vous souhaitez créer un lien vers tous les éléments d'un type particulier sur une page, s'ils n'ont pas d'identifiant ou de classes? Rendez-le plus facile, utilisez les sélecteurs de type. Si vous devez sélectionner toutes les listes non ordonnées, utilisez ul {}.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: visité et X: lien

  a: link {color: red;}
  a: visité {couleur: violet;}
 

Nous utilisons ici la pseudo-classe: link pour sélectionner tous les liens sur lesquels aucun clic n'a encore été effectué.

Il existe également une pseudo-classe: «visité», qui, comme vous l’attendiez, nous permet d’appliquer le style uniquement aux liens sur lesquels un clic a été effectué.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X + Y

  ul + p {
  couleur: rouge;
  }
 

C'est ce qu'on appelle le sélecteur adjacent. Dans ce cas, chaque paragraphe suivant immédiatement après chaque élément ul sera rouge.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X> Y

  #container> ul {
  bord: 1px noir solide;
  }
 

La différence entre XY et X> Y est que ce dernier sélectionne uniquement les descendants directs. Prenons l'exemple suivant:

  <div id = "conteneur">
  <ul>
  <li> Élément de liste
  <ul>
  <li> Enfant </ li>
  </ ul>
  </ li>
  <li> Élément de liste </ li>
  <li> Élément de liste </ li>
  <li> Élément de liste </ li>
  </ ul>
  </ div>
 

Le sélecteur #container> ul ne sélectionne que les éléments ul qui sont les descendants directs du bloc div avec l'identifiant conteneur . C'est à dire dans ce cas, ce sélecteur ne sélectionnera pas l'élément ul , qui est un descendant du premier élément li .

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X ~ Y

  ul ~ p {
  couleur: rouge;
  }
 

Cette combinaison d'éléments soeurs est similaire à X + Y , mais elle est moins stricte. Si, dans le cas de ul + p , seuls les premiers éléments de p qui suivent ul sont sélectionnés (c'est-à-dire s'il y a contiguïté dans le choix), le sélecteur que nous considérons est plus général.

Dans notre cas, il sélectionnera tous les éléments p suivant l'élément ul .

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [titre]

  a [titre] {
  couleur: vert;
  }
 

Nous nous référons ici à l'attribut sélecteur. Dans notre exemple, seuls les liens avec l'attribut title seront colorés en vert.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [href = "toto"]

  un [href = "http://www.codeharmony.ru"] {
  couleur: rouge;
  }
 

Le code ci-dessus permettra de donner du style à tous les liens dont l'attribut href est http://www.codeharmony.ru. Ces liens seront en rouge. Les liens restants ne recevront pas ce style.

Cela fonctionne bien, mais c'est un peu rigide. Que se passe-t-il si le lien mène effectivement à Codeharmony.ru mais que l'adresse est peut-être répertoriée sous la forme codeharmony.ru et non pas http://www.codeharmony.ru? Dans ce cas, nous pouvons utiliser les bases des expressions régulières.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [href * = "codeharmony"]

  un [href * = "codeharmonie"] {
  couleur: rouge;
  }
 

Allons plus loin; c'est exactement ce dont nous avons besoin. Un astérisque indique que la valeur que vous recherchez peut figurer dans n'importe quelle partie de l'attribut href . Ainsi, nous pouvons sélectionner à la fois http://www.codeharmony.ru et www.codeharmony.ru et codeharmony.ru.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [href ^ = "http"]

  un [href ^ = "http"] {
  background: url (chemin / vers / external / icon.png) no-repeat;
  padding-left: 10px;
  }
 

Avez-vous déjà réfléchi à la manière dont, sur certains sites, à côté des liens menant à d'autres sites (externes au site actuel), de petites icônes permettent d'informer l'utilisateur? Ce sont d'excellents "rappels" pour l'utilisateur que le lien mène à un autre site.

Ceci est fait à l'aide du symbole ^ (carat) . Il est généralement utilisé dans les expressions régulières pour indiquer le début d'une ligne. Si nous voulons sélectionner des liens à partir desquels l'attribut href commence par http, nous pouvons utiliser le sélecteur de l'exemple ci-dessus.

"Veuillez noter que nous ne recherchons pas http: //. Ceci est facultatif et, de plus, ne prend pas en compte les liens utilisant le protocole https: //."
Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [href $ = ". Jpg"]

  un [href $ = ". jpg"] {
  couleur: rouge;
  }
 

Encore une fois, nous utilisons une expression régulière et le symbole $ pour marquer la fin d'une ligne. Dans cet exemple, nous recherchons tous les liens qui lient des images avec l'extension .jpg . Bien sûr, cette approche ne fonctionnera pas pour les images avec les extensions .gif , .png , etc.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [data - * = "toto"]

  un [data-filetype = "image"] {
  couleur: rouge;
  }
 

Comment pouvons-nous couvrir différents types d'images? Nous pouvons créer, par exemple, plusieurs sélecteurs:

  un [href $ = ". jpg"],
  un [href $ = ". jpeg"],
  un [href $ = ". png"],
  un [href $ = ". gif"] {
  couleur: rouge;
  }
 

Mais c'est une corvée et pas élégante. Une autre option consiste à créer votre propre attribut data-filetype et à l'ajouter à chaque lien menant à l'image.

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

En faisant cela, nous pouvons utiliser le code de cet exemple:

  un [data-filetype = "image"] {
  couleur: rouge;
  }
 
Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [foo ~ = "bar"]

  a [data-info ~ = "external"] {
  couleur: rouge;
  }

  a [data-info ~ = "image"] {
  bord: 1px noir solide;
  }
 

Voici un autre tour intéressant que tout le monde ne sait pas. Le signe ~ (tilde) nous permet de sélectionner des attributs avec des valeurs séparées par des espaces, c.-à-d.

  <a href="path/to/image.jpg" data-info="external image"> cliquez ici </a>. 

En utilisant cette technique, nous pouvons créer des échantillons avec les combinaisons dont nous avons besoin:

  / * Sélectionne l'attribut data-info contenant la valeur externe * /
  a [data-info ~ = "external"] {
  couleur: rouge;
  }

  / * et sélectionnez l'attribut data-info contenant la valeur de l'image * /
  a [data-info ~ = "image"] {
  bord: 1px noir solide;
  }
 
Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: vérifié

  entrée [type = radio]: vérifié {
  bord: 1px noir solide;
  }
 

Cette pseudo-classe sélectionne les éléments marqués, par exemple un bouton radio ou une case à cocher.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: après

  .clearfix: après {
  content: "";
  affichage: bloc;
  clair: les deux;
  visibilité: cachée;
  taille de police: 0;
  hauteur: 0;
  }

  .clearfix {
  * display: inline-block;
  _Hauteur: 1%;
  }
 

Cette pseudo-classe vous permet de générer du contenu autour de l'élément sélectionné.

Cet exemple montre comment utiliser la pseudo-classe : after après un bloc avec la classe .clearfix crée une chaîne vide, puis l'efface. Bonne méthode lorsqu'il est impossible d'appliquer un débordement: masqué .

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: vol stationnaire

  div: hover {
  arrière-plan: # e3e3e3;
  }
 

Vous le savez certainement. Le nom officiel ressemble à "pseudo-classe basée sur l'action de l'utilisateur". Cela semble effrayant, même si en réalité tout est simple. Voulez-vous appliquer un certain style à un élément lorsque vous le survolez? C'est le plus!

"N'oubliez pas que les anciennes versions d'IE ne comprennent pas cette pseudo-classe en relation avec autre chose que la balise a."

Souvent, cette technique est utilisée pour définir la limite inférieure des liens lorsque vous les survolez:

  a: hover {
  bord inférieur: 1px noir uni;
  }
 
"Mega-cheat: border-bottom: 1px black solid; semble plus beau que le text-decoration: souligné;"
Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
6.0+ (dans IE6 ne fonctionne qu'avec des liens) 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: pas (sélecteur)

  div: not (#container) {
  couleur: bleu;
  }
 

Le déni peut aussi être très utile. Supposons que je veuille sélectionner tous les div sauf un avec l'identifiant conteneur . Pour cela, un code avec une négation (non égale) est parfait.

Si je dois sélectionner tous les éléments sauf les balises de paragraphe, je peux écrire ceci:

  *: pas (p) {
  couleur: vert;
  }
 
Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X :: pseudoElement

  p :: première ligne {
  poids de police: gras;
  taille de police: 1.2em;
  }
 

Les pseudo-éléments peuvent être utilisés pour nommer le fragment d'un élément, par exemple la première ligne ou la première lettre. S'applique uniquement aux éléments de bloc.

Sélectionnez la première lettre du paragraphe:

  p :: première lettre {
  float: gauche;
  taille de police: 2em;
  poids de police: gras;
  famille de polices: cursive;
  padding-right: 2px;
  }
 

Ce morceau de code trouvera tous les paragraphes de la page et appliquera les styles spécifiés à la première lettre de chacun d’eux. Ceci est souvent utilisé pour créer un effet de titre de journal.

Sélectionnez la première ligne du paragraphe:

  p :: première ligne {
  poids de police: gras;
  taille de police: 1.2em;
  }
 

Semblable à l'exemple précédent, mais dans ce cas, la première ligne de chaque paragraphe sera sélectionnée.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: nième enfant (n)

  li: nième enfant (3) {
  couleur: rouge;
  }
 

Rappelez-vous les moments où nous n'avions aucune possibilité de faire référence à un descendant d'élément ordinal spécifique? Cette pseudo-classe résout ce problème!

Un entier est pris en paramètre. Si vous devez sélectionner le 2ème élément de la liste, vous devez utiliser la construction: li: nth-child (2) .

Nous pouvons même sélectionner des groupes d'éléments descendants. Par exemple, pour sélectionner chaque quatrième élément de la liste, vous devez utiliser la construction: li: nth-child (4n) .

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

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

  li: nth-last-child (2) {
  couleur: rouge;
  }
 

Que faire si vous avez une grande liste non ordonnée et que vous avez besoin, par exemple, de sélectionner le troisième élément à partir de la fin. Au lieu d'écrire li: nth-child (397) , vous pouvez utiliser le pseudo-classe nth-last-child .

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: nième de type (n)

  ul: nth-of-type (3) {
  bord: 1px noir solide;
  }
 

Il arrive parfois que, au lieu de choisir certains descendants, vous devez faire un choix en fonction du type d’élément.

Imaginez qu'il y a cinq listes non ordonnées sur la page. Si vous avez besoin d'appliquer des styles uniquement à la troisième liste, mais que celle-ci ne possède pas d'identificateur unique ni d'autres "points d'ancrage", vous pouvez utiliser la pseudo-classe nth de type (n) . Le code ci-dessus montre comment styliser uniquement la troisième liste non ordonnée.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
9.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

X: nième-dernier-de-type (n)

  ul: nth-last-of-type (3) {
  bord: 1px noir solide;
  }
 

Oui, pour compléter le tableau, il existe une telle option. Vous pouvez donc sélectionner le n-ième élément d’un certain type à partir de la fin.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: premier enfant

  ul li: premier-enfant {
  bordure supérieure: aucune;
  }
 

Cette pseudo-classe vous permet de sélectionner uniquement le premier descendant de l'élément parent. Souvent utilisé pour supprimer les limites des premier et dernier éléments de la liste.

Par exemple, si vous avez une liste de lignes ayant chacune une bordure en haut et une bordure en bas , le dernier et le premier élément de la liste seront un peu en dehors de l'ordre général.

Pour éliminer cet inconvénient, vous pouvez utiliser cette pseudo-classe.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: dernier enfant

  ul> li: dernier-enfant {
  couleur: vert;
  }
 

Contrairement à la classe first-child , last-child sélectionnera le dernier élément de l'élément parent.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: enfant unique

  div p: enfant unique {
  couleur: rouge;
  }
 

Honnêtement, c’est une pseudo-classe rarement utilisée, mais néanmoins utile aussi. Cela vous permet de choisir les éléments qui sont les seuls descendants de leurs parents.

Dans notre exemple, le style ne sera appliqué qu'au paragraphe, qui est le seul descendant du bloc div .

Regardons le balisage suivant pour plus de clarté:

  <div> <p> Voici le seul paragraphe du bloc. </ p> </ div>

  <div>
  <p> Voici le premier paragraphe du bloc. </ p>
  <p> Voici le deuxième paragraphe du bloc. </ p>
  </ div>
 

Dans ce cas, les paragraphes de la deuxième div ne sont pas sélectionnés. Le style ne sera appliqué qu'à un paragraphe de la première div .

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: seulement de type

  li: only-of-type {
  poids de police: gras;
  }
 

Cette pseudo-classe sélectionne les éléments qui n'ont pas d'éléments frères dans leur conteneur conteneur. Par exemple, sélectionnons tous les ul qui contiennent un seul li .

Vous pouvez écrire ul li , mais cette méthode sélectionnera tous les éléments li . Le seul moyen est d'utiliser le seul type .

  ul> li: only-of-type {
  poids de police: gras;
  }
 
Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: premier de type

Cette pseudo-classe vous permet de sélectionner le premier frère du même type.

Pour mieux comprendre cela, copiez le code suivant dans votre éditeur:

  <div>
  <p> Voici un paragraphe. </ p>
  <ul>
  <li> Élément 1. </ li>
  <li> Élément 2. </ li>
  </ ul>

  <ul>
  <li> Élément 3. </ li>
  <li> Élément 4. </ li>
  </ ul>
  </ div>
 

Maintenant, sans lire plus loin, essayez de donner un style uniquement à "élément 2". Lorsque vous devinez (ou vous rendez), lisez la suite.

Solution 1

Il y a plusieurs façons de résoudre ce problème. Considérez juste quelques-uns d'entre eux. Commençons par utiliser first-of-type :

  ul: premier-de-type> li: n-enfant (2) {
  poids de police: gras;
  }
 

Ce code indique: "Recherchez la première liste non ordonnée de la page, puis recherchez uniquement ses descendants directs qui sont des éléments li. Ensuite, sélectionnez uniquement le deuxième élément li dans l'ordre."

Solution 2

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

  p + ul li: dernier-enfant {
  poids de police: gras;
  }
 

Nous trouvons ici ul immédiatement après la balise de paragraphe, après quoi nous trouvons le plus récent de ses enfants.

Solution 3

Vous pouvez jouer un peu plus avec les sélecteurs et faire ceci:

  ul: premier-de-type li: dernier-dernier-enfant (1) {
  poids de police: gras;
  }
 

Maintenant nous obtenons le premier élément ul sur la page, puis cherchons le tout premier élément li , mais en partant de la fin.

Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Conclusion

Si vous écrivez toujours du code, en tenant compte de l'existence d'IE6, vous devez être extrêmement prudent lorsque vous utilisez de nouveaux sélecteurs. Mais ne faites pas une excuse à cela, ne dites pas que vous n’avez pas besoin de le savoir, vous vous compliquez la vie.

Si vous travaillez avec des bibliothèques JavaScript, par exemple avec jQuery, essayez toujours d'utiliser des sélecteurs CSS3 "natifs" lorsque cela est possible. Dans ce cas, votre code fonctionnera plus rapidement.

Mémo sélecteurs CSS

Sélecteurs CSS nécessaires chaque jour

Via codeharmony.ru