Les 30 sélecteurs CSS à connaître absolument

Développement Web - CSS

Mercredi, 23 Février 2011 11:26

Vous prétendez maîtriser le CSS et pourtant vous n'utilisez que les sélecteurs de base du genre #mon_id, .ma_classe, #mon_id div li. Remettez-vous en question. Dans ce guide, vous découvrirez enfin les sélecteurs avancés qui vous sont obscurs et pourtant oh, combien Awesome! Des sélecteurs CSS à consommer sans modération.

*

* {
   margin: 0;
   padding: 0;
}

C'est le sélecteur universel. Le symbole étoile cible tous les éléments de la page. Beaucoup de développeurs l'utilisent pour mettre à zéro les marges de tous les éléments.

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

#monid

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

Le sélecteur d'ID permet de cibler un élément par son identifiant. L'identifiant doit être unique. Plusieurs éléments d'une même page ne peuvent pas avoir le même identifiant.

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

.maclasse

.error {
   color: red;
}

A la différence des sélecteurs d'ID, les sélecteurs de classe peuvent cibler plusieurs éléments.

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

X Y

li a {
   text-decoration: none;
}

Utilisez le sélecteur descendant pour être plus spécifique. Pluôt que de cibler toutes les balise de lien, l'exemple ci-dessus cible seulement celles qui sont à l'intérieur d'un élément de liste.

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

X

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

Les sélecteurs de type permettent de cibler un élément grâce à son type.

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

X:link et X:visited

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

La pseudo-classe :link correspond à tous les liens qui n'ont pas été visités.

La pseudo-classe :visited correspond à tous les liens déjà visités.

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X + Y

ul + p { 
   color: red; 
}

Le sélecteur adjacent correspond à tout élément Y immédiatement précédé par un élément X. L'exemple ci-dessus permet d'appliquer un style au premier paragraphe qui suit une liste non ordonnée.

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X > Y

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

Contrairement au sélecteur descendant, le sélecteur d'enfant cible seulement le descendant direct. Considérons le code suivant.

<div id="contenu">
   <ul>
       <li> Elément de liste
         <ul>
            <li> Enfant </li>
         </ul>
       </li>
       <li> Elément de liste </li>
       <li> Elément de liste </li>
       <li> Elément de liste </li>
   </ul>
 </div>

Le sélecteur #contenu > ul cible tous les éléments ul qui sont descendants directs d'un bloc ayant pour id #contenu. Il ne ciblera pas, par exemple, l'élément ul descendant du premier li.

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X ~ Y

ul ~ p {
   color: red;
}

Ce sélecteur est semblable à X + Y. Cependant, il est moins strict. Dans l'exemple ci-dessus, il cible tous les paragraphes qui suivent une liste non ordonnée.

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X[foo]

a[title] {
 color: green;
 }

Correspond à tout élément X ayant un attribut foo.

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X[href="/foo"]

a[href="http://www.tomsyweb.com"] {
    color: #1f6053;
}

Le code ci-dessus applique un style à tous les éléments a qui pointent vers http://www.tomsyweb.com.

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X[href*="foo"]

a[href*="tomsyweb"] {
    color: #1f6053;
}

On ajoute une étoile pour indiquer que "foo" doit se trouver quelque part dans la valeur de l'attribut. Ainsi, ce code prend également en compte tomsyweb.com, instant.tomsyweb.com, elections.tomsyweb.com.

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X[href^="foo"]

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

Cible tous les liens dont la valeur de l'attribut commence par "foo".

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X[href$="foo"]

a[href$=".jpg"] {
    color: red;
}

Cette fois, nous utilisons le symbole $ pour se référer à la fin de la valeur de l'attribut. Dans cet exemple, on recherche tous les liens qui pointent vers une image — ou une URL qui se termine par ".jpg".

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X[data-*="foo"]

a[data-filetype="image"] {
   color: red;
}

En se référant au sélecteur précédent, on pourrait créer plusieurs sélecteurs pour prendre en compte les autres types d'image:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
    color: red;
}

Mais c'est inefficace. A la place, on peut utiliser des attributs personnalisés. Nous pouvons ajouter notre propre attribut data-filetype à chaque lien d'image.

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

Nous pouvons ensuite utiliser un sélecteur d'attribut pour cibler tous ces liens.

a[data-filetype="image"] {
    color: red;
}

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X[foo~="bar"]

a[data-info~="external"] {
    color: red;
}

a[data-info~="image"] {
    border: 1px solid black;
}

Le symbole tilde permet de cibler un élément dont l'attribut "foo" a pour valeur une liste de valeurs séparées par des espaces et dont une de celles-ci est "bar".

Le code CSS ci-dessus pourrait donc s'appliquer à:

<a href="/image.jpg" data-info="external image"> Lien </a>

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X:checked

input[type=radio]:checked {
    border: 1px solid black;
}

Cette pseudo-classe ne cible que les éléments de formulaire qui ont été cochés - comme un bouton radio ou une case à cocher.

Compatibilité

IE9+
Firefox
Chrome
Safari
Opera

X:after

Les pseudo-éléments before et after servent à générer du contenu autour de l'élément ciblé. Les développeurs trouvent chaque jour des idées créatives pour les utiliser de manière efficace. L'une des utilisations les plus connues est le hack clear-fix.

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

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

Compatibilité

IE8+
Firefox
Chrome
Safari
Opera

X:hover

div:hover {
    background: #e3e3e3;
}

Vous voulez appliquer un style particulier lorsque l'utilisateur survole un élément ? L'élément :hover fera l'affaire.

Gardez à l'esprit que les anciennes versions d'Internet Explorer (IE6) ne permettent pas l'utilisation de la pseudo-classe :hover sur un élément autre que les balises d'ancrage (liens).

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

X:not(selecteur)

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

La pseudo-classe de négation a une utilité particulière. Le code ci-dessus permet de sélectionner tous les div, sauf ceux qui ont pour id #contenu.

Compatibilité

IE9+
Firefox
Chrome
Safari
Opera

X::pseudoElement

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

On peut utiliser les pseudo-éléments pour appliquer un style à des parties spécifiques d'un élément, comme la première ligne ou la première lettre.

Nous avons ciblé dans l'exemple la première ligne de tous les paragraphes. Mais on peut également cibler la première lettre.

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

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

X:nth-child(n)

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

La notation de pseudo-classe :nth-child(an+b) représente un élément qui a an+b-1 éléments frères devant lui dans le document, pour une valeur entière positive ou nulle de n. En d'autres mots, cela sélectionne chaque b-ième fils d'un élément après que tous ses enfants aient été séparés en groupes de a éléments chacun. Par exemple, cela permet de sélectionner les lignes paires dans un tableau, et peut être utilisé, par exemple, pour alterner la couleur du texte d'un paragraphe sur quatre couleurs. Les valeurs de a et b doivent être des entiers négatifs, positifs ou nuls. L'index du premier enfant d'un élément est 1.
De plus, :nth-child() peut prendre pour argument odd et even. odd a la même signification que 2n+1, et "even" a la même signification que 2n. Source

Je sais, c'est difficile à comprendre. Essayez de faire des tests et petit à petit, vous comprendrez.

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari

X:nth-last-child(n)

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

Et si vous aviez une liste comportant de nombreux éléments et que vous aviez besoin d'accéder à l'avant-dernier élément. Au lieu de faire li:nth-child(398), vous pouvez utiliser li:nth-last-child.

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari
Opera

X:nth-of-type(n)

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

Imaginez que vous ayez cinq listes. Pour cibler seulement la troisième liste, vous pouvez utiliser la pseudo-classe :nth-of-type(n).

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari

X:nth-last-of-type(n)

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

Nous pouvons aussi utiliser nth-last-of-type pour commencer à partir de la fin de la liste des sélecteurs.

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari
Opera

X:first-child

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

Cette pseudo-classe permet de cibler le premier enfant de l'élément parent. Vous en aurez besoin souvent pour supprimer les bordures du premier et du dernier élément d'une liste.

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

X:last-child

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

Cible le dernier enfant de l'élément parent.

Compatibilité

IE9+
Firefox
Chrome
Safari
Opera

X:only-child

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

Cette pseudo-classe permet de cibler les éléments qui sont enfants uniques de leur parent.

<div><p> Mon paragraphe. </p></div>

<div>
    <p> Paragraphe 1. </p>
    <p> Paragraphe 2. </p>
</div>

Dans cet exemple, seul le paragraphe du premier div sera en rouge.

Compatibilité

IE9+
Firefox
Chrome
Safari
Opera

X:only-of-type

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

Cible tous les éléments qui n'ont pas de frères au sein de l'élément parent.

<ul>
    <li> Elément de liste </li>
    <li> Elément de liste </li>
</ul>

 <ul>
    <li> Elément de liste </li>
 </ul>

Dans cet élément, seul l'élément de liste du deuxième ul sera en gras.

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari
Opera

X:first-of-type

Identique à nth-of-type(1), cette pseudo-classe représente un élément qui est le premier enfant de son type de l'élément parent.

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari
Opera

[Source]

Mise à jour le Mercredi, 23 Février 2011 17:20

Suivez-moi

Suivez @tomsyweb

*

#monid

.maclasse

X Y

X

X:link et X:visited

X + Y

X > Y

X ~ Y

X[foo]

X[href="/foo"]

X[href*="foo"]

X[href^="foo"]

X[href$="foo"]

X[data-*="foo"]

X[foo~="bar"]

X:checked

X:after

X:hover

X:not(selecteur)

X::pseudoElement

X:nth-child(n)

X:nth-last-child(n)

X:nth-of-type(n)

X:nth-last-of-type(n)

X:first-child

X:last-child

X:only-child

X:only-of-type

X:first-of-type

Catégories

CMS

Informatique

Internet

Développement Web

Bonus

Frameworks

Webdesign

Mobile

Suivez-moi