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

Sélecteurs CSS pour chaque jour

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'id, suivi par des sélecteurs de pseudo-classe et des 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 des caractères ">" et "+" . Ces délimiteurs ont une signification pratique lors de la création de sites et sont conçus pour plus de commodité.

Malgré le fait que beaucoup de sélecteurs mentionnés ici font partie de la spécification CSS3 et, par conséquent, ne sont supportés que par les navigateurs modernes, vous devriez toujours les lire et les garder en mémoire, car ils sont très pratiques.

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

Types de sélecteurs

Le sélecteur de balise , en tant que sélecteur, est le nom de la balise dont vous souhaitez modifier les propriétés.

Un sélecteur universel , qui est indiqué par le symbole * et est utilisé pour modifier les propriétés nécessaires de tous les éléments de la page.

Les classes sont utilisées pour les é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 des seconds doivent être uniques, ne pas être répétés, ce qui leur permet d'être utilisés avec des scripts (JavaScript).

Les pseudo-classes sont utilisées pour modifier le style des éléments de page existants en fonction de leur état dynamique, par exemple, lorsque vous travaillez avec des liens ( : lien ,: visité ,: hover,: 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 ( : first-letter ,: first-line ), et permettent également la génération et le stylisme du contenu inexistant ( : before ,: after et la propriété content ). En CSS3, les pseudo-éléments commencent par deux deux-points :: ( :: first-letter , :: first-line , :: before , :: after ).

Sélecteurs d'attributs . Permet de styliser l'élément non seulement par la valeur de l'étiquette, mais aussi par la valeur de l'attribut (a [attr]).

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

Sélecteurs d'enfants . Coiffer un élément immédiatement après l'autre élément et en être le descendant direct (a> b).

Sélecteurs voisins . Conçu pour le style des éléments voisins qui partagent un parent commun. (a + b)

Sélecteurs connexes . Ils sont similaires aux sélecteurs voisins, mais avec la différence que tous les éléments voisins sont stylisés, pas seulement le premier élément voisin. D'abord apparu 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. Beaucoup de développeurs web utilisent ceci pour "annuler" toutes les indentations externes et internes.

En outre, le caractère * peut être utilisé pour les éléments enfants de l'objet.

  #container * {
  bordure: 1px noir uni;
  }
 

Ce code cible tous les éléments qui sont des enfants de l'ID de conteneur.

Compatibilité
Internet Explorer Chrome Opera 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 de réseau nous permet de sélectionner des éléments par l'identifiant. C'est l'une des façons les plus courantes de sélectionner des éléments, mais soyez prudent lorsque vous l'utilisez.

"Demandez-vous: ai-je vraiment besoin d'utiliser un identifiant pour que certains éléments s'y réfèrent?"

Les sélecteurs d'identifiant sont inflexibles et difficiles à réutiliser dans différents projets. Si possible, essayez d'abord en utilisant le nom du tag ou même une pseudo-classe.

Compatibilité
Internet Explorer Chrome Opera 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 l'identifiant pour trouver l'aiguille dans la botte de foin et n'appliquez le style qu'à un objet particulier.

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

XY

  li a {
  text-decoration: aucun;
  }
 

Le prochain type de sélecteur fréquemment utilisé est le sélecteur enfant. Il devrait être utilisé quand il est nécessaire de faire plus de sélection de points d'éléments.

Par exemple, que faire si vous n'avez pas besoin de sélectionner toutes les balises de lien, mais seulement celles qui se trouvent dans la liste non ordonnée? C'est juste le cas quand vous devriez utiliser le sélecteur d'enfant.

"Astuce: Si votre sélecteur est similaire à XYZA B.error, alors vous faites probablement quelque chose dessus.) Demandez-vous toujours, est-ce vraiment le moyen le plus facile"
Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X

  a {color: red;}
  ul {marge-gauche: 0px;}
 

Que faire si vous voulez envoyer tous les éléments d'un certain type sur une page s'ils n'ont pas un id ou des classes? Faites-le plus facilement, utilisez des sélecteurs de type. Si vous devez sélectionner toutes les listes non ordonnées, utilisez ul {}.

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X: visité et X: lien

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

Ici, nous utilisons le pseudo-class: lien pour sélectionner tous les liens qui n'ont pas encore été cliqués.

Il y a aussi une pseudo-classe: visited, qui, comme on peut s'y attendre, nous permet d'appliquer le style uniquement aux liens qui ont été cliqués ou transférés.

Compatibilité
Internet Explorer Chrome Opera 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 chaque élément ul sera rouge.

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X> Y

  #container> ul {
  bordure: 1px noir uni;
  }
 

La différence entre XY et X> Y est que ce dernier ne choisira que des descendants directs. Considérez l'exemple suivant:

  <div id = "container">
  <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 ne sélectionnera que les ul qui sont des descendants directs du bloc div avec l'identifiant du conteneur . Ie. dans ce cas, ce sélecteur ne sélectionne pas l'élément ul , qui est un descendant du premier élément li .

Compatibilité
Internet Explorer Chrome Opera 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 (frères et sœurs) est similaire à X + Y , mais elle est moins stricte. Si dans le cas ul + p seuls les premiers éléments de p suivent ul sont sélectionnés (ie, il y a une contiguïté dans le choix), alors le sélecteur que nous considérons maintenant est plus général.

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

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X [titre]

  un [titre] {
  couleur: vert;
  }
 

Ici, nous nous référons à l'attribut selector. Dans notre exemple, seuls les liens qui ont l'attribut title seront colorés en vert.

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X [href = "foo"]

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

Le code ci-dessus donnera le style à tous les liens, dont l'attribut href est http://www.codeharmony.ru. Ces liens seront rouges. Le reste des liens n'aura pas ce style.

Cela fonctionne bien, mais c'est un peu inflexible. Que faire si le lien mène réellement à Codeharmony.ru mais, peut-être, l'adresse est spécifiée comme codeharmony.ru et non http://www.codeharmony.ru? Dans de tels cas, nous pouvons utiliser les bases des expressions régulières.

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X [href * = "codeharmonie"]

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

Allons plus loin. c'est exactement ce dont nous avons besoin. Un astérisque signifie que la valeur désirée peut être dans n'importe quelle partie de l'attribut href . Ainsi, nous pouvons sélectionner et http://www.codeharmony.ru et www.codeharmony.ru et codeharmony.ru.

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X [href ^ = "http"]

  a [href ^ = "http"] {
  background: url (chemin / vers / externe / icon.png) non-répétition;
  rembourrage-gauche: 10px;
  }
 

Avez-vous déjà réfléchi à la façon dont sur certains sites, à côté des liens menant à d'autres sites (externes à l'actuel), de petites icônes permettent à l'utilisateur de le savoir? 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 chaîne. Si nous voulons sélectionner les liens dont l'attribut href commence par http, nous pouvons utiliser le sélecteur de l'exemple ci-dessus.

"Notez que nous ne recherchons pas http: // Ceci est optionnel et, de plus, ne prend pas en compte les liens https: //."
Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X [href $ = ". Jpg"]

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

Encore une fois, nous utilisons l'expression régulière et le caractère $ pour indiquer la fin de la chaîne. Dans cet exemple, nous recherchons tous les liens qui se réfèrent aux images avec l'extension .jpg . Bien sûr, cette approche ne fonctionnera pas pour les images avec des extensions .gif , .png , etc.

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X [data - * = "foo"]

  a [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"],
  a [href $ = ". jpeg"],
  a [href $ = ". png"],
  a [href $ = ". gif"] {
  couleur: rouge;
  }
 

Mais c'est triste et pas élégant. Une autre option consiste à créer votre propre attribut -type de fichier 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 pour cet exemple:

  a [data-filetype = "image"] {
  couleur: rouge;
  }
 
Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X [foo ~ = "bar"]

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

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

Voici un autre truc intéressant que tout le monde ne connaît pas. Le caractère ~ (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="image externe"> cliquez ici </a> 

En utilisant cette technique, nous pouvons faire des sélections avec les combinaisons nécessaires:

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

  / * et sélectionnez l'attribut data-info, qui contient la valeur de l'image * /
  a [data-info ~ = "image"] {
  bordure: 1px noir uni;
  }
 
Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X: vérifié

  input [type = radio]: vérifié {
  bordure: 1px noir uni;
  }
 

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

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X: après

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

  .clearfix {
  * affichage: 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 : après le bloc avec la classe .clearfix , une chaîne vide est créée, puis effacée. Une bonne méthode quand vous ne pouvez pas appliquer le débordement: caché .

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X: hover

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

Que vous savez à coup sûr. Le nom officiel ressemble à une "pseudo-classe basée sur l'action de l'utilisateur". Cela semble effrayant, même si en réalité tout est simple. Souhaitez-vous appliquer un certain style à un élément lorsque le curseur de la souris le survole? C'est ça!

"Rappelez-vous que les anciennes versions d'IE ne comprennent pas cette pseudo-classe par rapport à quoi que ce soit, sauf le tag 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;
  }
 
"Méga-triche: border-bottom: 1px noir uni, meilleur que text-decoration: souligné;"
Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ (dans IE6 cela ne fonctionne que par rapport aux 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 veux sélectionner tous les blocs div sauf un avec l'identifiant du conteneur . Pour cela, le code avec la négation (pas égal) est bien.

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

  *: non (p) {
  couleur: vert;
  }
 
Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X :: pseudoElement

  p :: première ligne {
  font-weight: gras;
  taille de police: 1.2em;
  }
 

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

Nous choisissons la première lettre du paragraphe:

  p :: première lettre {
  float: à gauche;
  taille de police: 2em;
  font-weight: gras;
  font-family: cursive;
  rembourrage-droit: 2px;
  }
 

Ce morceau de code trouvera tous les paragraphes sur la page et appliquera les styles spécifiés à la première lettre de chacun d'entre eux. Souvent, cela est utilisé pour créer un effet "titre de journal".

Nous sélectionnons la première ligne du paragraphe:

  p :: première ligne {
  font-weight: gras;
  taille de police: 1.2em;
  }
 

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

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X: nième-enfant (n)

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

Vous souvenez-vous des moments où nous n'avons pas été en mesure de faire référence à un élément de commande descendant particulier? Cette pseudo-classe résout ce problème!

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

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

Compatibilité
Internet Explorer Chrome Opera 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 vous devez, par exemple, sélectionner le troisième élément à la fin. Au lieu d'écrire li: nth-child (397) , vous pouvez utiliser la pseudo-classe nth-last-child .

Compatibilité
Internet Explorer Chrome Opera 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) {
  bordure: 1px noir uni;
  }
 

Parfois, il y a des situations où, au lieu de choisir certains descendants, vous devez faire un choix selon le type de l'élément.

Imaginez qu'il y a cinq listes non ordonnées sur la page. Si vous devez appliquer des styles uniquement à la troisième liste, mais qu'il n'y a pas d'identifiant unique et d'autres "hooks", vous pouvez utiliser la pseudo-classe nth-of-type (n) . Le code ci-dessus montre comment donner le style à seulement la troisième liste non ordonnée.

Compatibilité
Internet Explorer Chrome Opera 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) {
  bordure: 1px noir uni;
  }
 

Oui, pour être complet, il existe une telle option. Vous pouvez donc choisir le nième élément d'un certain type à la fin.

Compatibilité
Internet Explorer Chrome Opera 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 {
  border-top: aucun;
  }
 

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

Par exemple, si vous avez une liste de lignes, dont chacune a un border-top et un border-bottom , les derniers et premiers éléments de la liste seront légèrement hors de l'ordre général.

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

Compatibilité
Internet Explorer Chrome Opera 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 Opera Safari Firefox Android iOS
9.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X: seulement-enfant

  div p: seulement-enfant {
  couleur: rouge;
  }
 

Franchement, c'est une pseudo-classe assez rarement utilisée, mais néanmoins utile. Il vous permet de sélectionner les éléments qui sont les seuls descendants de vos parents.

Dans notre exemple, le style sera appliqué uniquement au paragraphe, qui est le seul enfant du bloc div .

Considérons par souci de clarté 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 second bloc div ne seront pas sélectionnés. Le style sera appliqué uniquement au paragraphe du premier bloc div .

Compatibilité
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3.5+ 1,0+ 1,0+ 1,0+ 1,0+

X: seulement-de-type

  li: seul-de-type {
  font-weight: gras;
  }
 

Cette pseudo-classe choisit les éléments qui n'ont pas d'éléments soeurs dans le conteneur qui les contient. Par exemple, sélectionnons tous les ul qui contiennent li simple.

Vous pouvez écrire ul li , mais cette méthode va sélectionner tous les éléments li . La seule façon est d'utiliser seulement-de-type .

  ul> li: only-of-type {
  font-weight: gras;
  }
 
Compatibilité
Internet Explorer Chrome Opera 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 le 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 le style uniquement à "élément 2". Lorsque vous devinez (ou abandonner), lisez la suite.

Solution 1

Il existe plusieurs façons de résoudre ce problème. Considérez seulement certains d'entre eux. Commençons par l'utilisation du premier-type :

  ul: premier-type> li: nth-child (2) {
  font-weight: gras;
  }
 

Ce code dit: "Trouvez la première liste non ordonnée sur la page, puis trouvez seulement ses descendants directs qui sont des éléments de li.Après cela, choisissez seulement le second élément dans l'ordre li."

Solution 2

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

  p + ul li: dernier-enfant {
  font-weight: gras;
  }
 

Ici nous trouvons ul , qui suit immédiatement l'étiquette du paragraphe, après quoi nous trouvons le dernier élément enfant de celui-ci.

Solution 3

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

  ul: premier-de-type li: nth-last-child (1) {
  font-weight: gras;
  }
 

Maintenant nous obtenons déjà le premier élément ul sur la page, puis cherchons le tout premier élément li , mais à la fin.

Compatibilité
Internet Explorer Chrome Opera 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 lors de l'utilisation de nouveaux sélecteurs. Mais ne faites pas cette excuse, ne dites pas que vous n'avez pas besoin de savoir - ceci vous complique 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électeur CSS

Sélecteurs CSS nécessaires pour chaque jour

Via codeharmony.ru