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

Sélecteurs CSS pour chaque jour

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

Ainsi, un 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 (nous ne mentionnerons pas ce dernier dans cette brève description). 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 un sens pratique lors de la création de sites et sont conçus pour la 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 nom de la balise dont vous souhaitez modifier les propriétés sert de sélecteur.

Un sélecteur universel , indiqué 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 l'attribut class et la 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 est que les noms du second doivent être uniques, non répétés, ce qui leur permet d'être utilisés 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éterminent le style des éléments qui ne sont pas clairement définis dans la structure du document ( : première lettre,: première ligne ) et vous 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 contextuels . Stylisation d'éléments à 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 qui en est le descendant direct (a> b).

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

Sélecteurs associés . Semblable aux sélecteurs voisins, mais à la différence que tous les éléments voisins sont stylisés, 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 astérisque vous permet de sélectionner tous les éléments de la page. De nombreux développeurs Web l'utilisent pour «mettre à zéro» tous les retraits internes et externes.

En outre, le symbole * peut être utilisé pour les enfants d'un objet.

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

Ce code cible tous les éléments qui sont les enfants d'un 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 symbole dièse 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.

"Demandez-vous: Ai-je vraiment besoin d'utiliser id 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 un nom de tag ou même une 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 réside dans le fait qu'en utilisant 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 trouver «l'aiguille dans la botte de foin» et n'appliquez le style qu'à 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 prochain type de sélecteur couramment utilisé est le sélecteur enfant. Il convient de l'utiliser lorsqu'il est nécessaire de produire une sélection plus précise des éléments.

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

"Conseil: si votre sélecteur ressemble à XYZA B.error, vous faites probablement quelque chose comme ceci. Demandez-vous toujours si c'est vraiment le moyen le 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

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

Que faire si vous voulez faire référence à tous les éléments d’un certain type sur la page s’ils n’ont pas d’id 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;}
 

Ici, nous utilisons la pseudo-classe: link pour sélectionner tous les liens sur lesquels vous n'avez pas encore cliqué.

Il existe également une pseudo-classe: visitée, qui, comme vous le souhaitiez, 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 le soi-disant 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> descendant </ 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 sélectionne uniquement les éléments ul qui sont des enfants directs du bloc div avec l'identificateur conteneur . I.e. 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 qu'une adjacence dans la sélection est observée), 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 tournons ici vers l’attribut selector. Dans notre exemple, seuls les liens avec l'attribut title seront 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 vous permet de styler tous les liens avec l'attribut href égal à http://www.codeharmony.ru. Ces liens seront en rouge. Les autres liens n'obtiendront 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 peut-être que l'adresse est listé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 signifie que la valeur que vous recherchez peut figurer n'importe où dans 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 au fait que sur certains sites, ainsi que sur les liens menant à d'autres sites (externes au site actuel), de petites icônes permettent d'informer l'utilisateur? Ce sont d'excellents «rappels» à l'utilisateur que le lien mène à un autre site.

Ceci est fait en utilisant le symbole ^ (carat) . Il est couramment utilisé dans les expressions régulières pour indiquer le début d'une ligne. Si nous voulons sélectionner des liens pour lesquels 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 ne prend pas non plus en compte les liens 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;
  }
 

De nouveau, nous utilisons l'expression régulière et le caractère $ pour marquer la fin de la ligne. Dans cet exemple, nous recherchons tous les liens qui pointent vers 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 triste et pas élégant. 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> 

Ce faisant, 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 connaît 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 faire des sélections avec les combinaisons dont nous avons besoin:

  / * Sélectionnez l'attribut data-info, qui contient la valeur external * /
  a [data-info ~ = "external"] {
  couleur: rouge;
  }

  / * et sélectionnez l'attribut data-info, qui contient la valeur 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 pour créer une chaîne vide, puis l' effacer . 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 à coup sûr. 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. Vous souhaitez appliquer un style spécifique à un élément lorsque vous le survolez? C'est ça!

"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 texte décoré: souligné;"
Compatibilité:
Internet Explorer Chrome Opéra Safari Firefox Android iOS
6.0+ (fonctionne uniquement en relation avec les liens dans IE6) 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 blocs div sauf un avec l'identifiant conteneur . Le code négatif (pas égal) est parfait pour cela.

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 styliser un fragment d'é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'avons pas pu accéder à un élément descendant ordinal spécifique? Cette pseudo-classe résout ce problème!

Le paramètre est un entier. Si vous souhaitez sélectionner le 2e é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 la 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 effectuer une sélection en fonction du type d'élément.

Imaginez qu'il y ait cinq listes non ordonnées sur une 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-of-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 être complet, il existe une telle option. Ainsi, vous pouvez sélectionner le niè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 enfant de l'élément parent. Souvent utilisé pour supprimer les bordures des premier et dernier éléments de la liste.

Par exemple, si vous avez une liste de séries ayant chacune des bordures en haut et en bas de la bordure , le dernier et le premier élément de la liste seront légèrement en désordre.

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 assez rarement utilisée, mais néanmoins, elle est également utile. Il vous permet de sélectionner les éléments qui sont les seuls descendants de vos parents.

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

Jetons un coup d'oeil à un tel balisage:

  <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 du deuxième bloc div ne seront pas sélectionnés. Le style ne sera appliqué qu'au paragraphe du premier bloc de la 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 de frères dans le conteneur qui les contient. 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 uniquement un 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 lit: "Recherchez la première liste non ordonnée de la page, puis recherchez uniquement ses descendants directs, qui sont des éléments de li. Après cela, sélectionnez uniquement l'élément de second ordre de li."

Décision 2

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

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

Nous trouvons ici ul immédiatement après la balise du paragraphe, après quoi nous en trouvons l’enfant le plus récent.

Décision 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;
  }
 

Nous avons déjà le premier élément ul sur la page, puis 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 les nouveaux sélecteurs. Mais ne vous excusez pas, ne dites pas que vous n’avez pas besoin de le savoir, cela vous rendra la vie difficile.

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.

Rappel du sélecteur CSS

Sélecteurs CSS nécessaires pour chaque jour

Via codeharmony.ru