facebook instagram twitter rss2 youtube youtube wordpress joomla tux appleinc windows skype paypal
 

En voici leur description accompagné à chaque fois d'un exemple d'utilisation.

Ces sélecteurs sont bien utiles, notamment pour modifier le look de CMS sur lequels vous ne voulez (ou ne pouvez) pas modifier le code source.

Ils peuvent tous être combinés les uns avec les autres, amusez-vous à en tester les cocktails !


* (l'étoile)

Le symbole étoile est le sélecteur universel, il cible tous les éléments de la page.
Pratique pour mettre à zéro les marges de tous les éléments par exemple.

*  {
    margin: 0;
}


#X (le dièse, l'ID)

Le sélecteur # permet de cibler un élément par son identifiant. Condition : l'identifiant doit être unique, en d'autres termes, plusieurs éléments ne peuvent avoir le même identifiant sur une même page.

#menu  {
    width: 960px;
    margin: 10px auto;
}


.X (le point, la classe)

Le point est le sélecteur de classe, il peut cibler plusieurs éléments (à la différence du sélecteur d'ID).

.bleu  {
    color: #337ab7;
}


.X.Y (deux classes accolées)

Ces deux sélecteurs de classe collées l'une à l'autre, ciblent uniquement des éléments qui ont ces deux classes (.X.Y)

.slogan  {
    font-style: italic;
}
.slogan.bleu  {
    color: #337ab7;
}

Ici la couleur bleu ne sera appliquée qu'aux éléments ayant la classe "slogan" mais aussi la classe "bleu" (au moins)

Exemple : <p class="slogan bleu">Je suis un slogan en italique et bleu</p>


.X .Y (deux classes qui se suivent)

Ces deux sélecteurs de classe avec un espace entre l'un et l'autre, ciblent uniquement l'élément descendant Y du parent X

.article .rouge  {
    color: #f00;
}

Ici la couleur rouge pourra s'appliquer à l'élément ".rouge" descendant (direct ou indirect) de l'élément ".article"

<div class="article">
    <p class="rouge">Je suis un paragraphe rouge dans un conteneur "article"</p>
</div>

Notez qu'ici on peut aussi styliser individuellement le div en utilisant la classe ".article" et le paragraphe avec la classe ".rouge".


X (le type)

Le sélecteur de type permet de cibler un élément grâce à son type.

body  {
    color: #333;
}
h1  {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.1;
}


:hover (deux-points hover)

Le sélecteur :hover permet d'appliquer un style lorsque l'utilisateur survole un élément.

.bouton:hover  {
    background-color: #4e74c2;
    color: #fff;
}


:not(sélecteur)

La pseudo-classe de négation permet de sélectionner tous les types mentionnés sauf ceux pointés par le sélecteur.

p:not(.secondaire)  {
    text-decoration: underline;
}

Dans cet exemple les paragraphes auxquels ne sont pas attribués la classe "secondaire" seront soulignés.


X Y (sélecteur descendant)

le sélecteur descendant permet d'être plus spécifique.

li a  {
    text-decoration: none;
}

Dans cet exemple seuls les liens compris dans une liste seront soulignés.


X > Y (sélecteur d'enfant)

le sélecteur d'enfant cible seulement le descendant direct

div#menu > ul  {
    border: 1px solid #333;
}

Dans cet exemple seuls les éléments ul de premier niveau, descendants direct du div#menu auront une bordure.


X + Y (sélecteur adjacent direct)

Le sélecteur adjacent direct cible tout élément Y immédiatement précédé par un élément X.

p + h2  {
    margin-top: 0;
}

Dans cet exemple seuls les titre de niveau 2 immédiatement précédés par un paragraphe n'auront pas de marge du dessus.


X ~ Y (sélecteur adjacent indirect)

Un peu similaire au précédent mais plus souple, ce sélecteur permet de cibler tous les éléments similaires Y précédés directement ou indirectement par un élément X.

h2 ~ ul  {
    margin-top: 10px;
}

Dans cet exemple ce sélecteur cible toutes les listes non ordonnées placées après un titre h2 (mais pas forcément juste après).



X:visited

La pseudo-classe :visited correspond à tous les liens qui ont été visités.

a:visited  {
    text-decoration: underline;
}


X[foo]

Cible tout élément X ayant un attribut foo.

span[title]  {
    border-bottom: 1px dotted #777;
    cursor: help;
}

Dans cet exemple tous les <span title="..."> seront soulignés (en pointillés) et le curseur de la souris prendra la forme d'un point d'interrogation.


X[Y="foo"]

Cible tout élément X ayant un attribut Y précis.

a[target="_blank"]  {
    border-right: 1px solid blue;
}

Dans cet exemple tous les liens ouvrant de nouvelles pages <a href="_blank" ...> seront stylisés avec une bordure droite bleue.


X[Y*="foo"]

On ajoute une étoile pour indiquer que "foo" doit se trouver quelque part dans la valeur de l'attribut Y.

a[href*="gnu"]  {
    font-weight: bold;
}

Dans cet exemple tous les liens vers gnu.org, forum.gnu.org, support.gnu.org etc. seront pris en compte et mis en gras.


X[Y^="foo"]

Comme pour les Regex, avec le symbole ^ circonflexe, on cible tous éléments X dont la valeur de l'attribut Y commence par "foo".

a[href^="http"]  {
    text-decoration: underline;
}

Dans cet exemple tous les liens commençant par http seront soulignés.


X[Y$="foo"]

Idem encore que pour les Regex, ici avec le $, on cible tous éléments X dont la valeur de l'attribut Y finit par "foo"

a[href$=".png"]  {
    margin-right: 5px;
}

Dans cet exemple tous les liens finissant par .png auront une marge à droite de 5px.


X[data-xyz="foo"]

Avec data- il est possible de créer ses propres attributs et pouvoir ainsi cibler spécifiquement un élément X.

Fausse Bonne Idée en HTML5 ? Cet article semble bien le prouver, car cette utilisation de data- donne à penser que les données ciblées sont d'une importance immédiate pour l'utilisateur (alors que ce ne serait là que pour donner du style). Utilisez-le donc en toute connaissance de cause et surtout si vous n'avez aucun autre moyen (plus sémantique) de cibler votre élément X.

a[data-info="video"]  {
    border-color: 1px solid green;
}

Un lien exprimé ainsi par exemple <a data-info="video" href="...">Voir la vidéo<a> sera entouré par une bordure verte.


X[foo~="un-truc"]

Avec cette utilisation, 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 serait "un-truc".

a[data-exemple~="cinema"]  {
    border: 1px solid red;
}

Dans cet exemple ce lien <a href="affiche.png" data-exemple="teaser cinema">En savoir plus</a> aura une bordure rouge.
Mais idem que pour le sélecteur précédent, cela peut s'avérer une Fausse Bonne Idéee en HTML5.


X:checked

Cette pseudo-classe cible uniquement les éléments de formulaire qui ont été cochés, bouton radio ou case à cocher.

input[type=checkbox]:checked  {
    background-color: gray;
}

Ici les cases cochées d'un formulaires auront un fond gris.


X:before et X:after

Les pseudo-éléments before et after servent à générer en CSS du contenu esthétique voir textuel avant ou après l'élément ciblé. Il sont souvent utilisés avec la propriété CSS "content".

a[target=_blank]:after  {
    content: url("externe.png");
}

Ici en associant le sélecteur :after au sélecteur de l'attribut target=_blank, l'image "externe.png" sera ajoutée après tous les liens sortant.


p::first-line

Applique un style à la première ligne d'un paragraphe

p::first-line  {
    font-size: 1.3em;
}


p::first-letter

Applique un style à la première lettre d'un paragraphe

p::first-letter  {
    float: left;
    font-size: 2.2em;
    padding-right: 5px;
    font-weight: bold;
}

Ce pseudo-élément permet d'obtenir un effet lettrine d'éditorial de journal pour la première lettre d'un article.


X:nth-child(n)

Assez compliqué à expliquer clairement, ce pseudo-élément permet de cibler par exemple toutes les lignes impaires d'un tableau HTML.
Mais il peut aussi servir à beaucoup d'autres choses, comme à styliser des listes par exemple.

tr:nth-child(2n+1)  {
    background-color: #F7F7F7;
}


X:nth-last-child(n)

Ce pseudo-élément est très pratique pour cibler un élément particulier d'une liste pouvant avoir un nombre aléatoire d'éléments par exemple.

li:nth-last-child(2)  {
    text-decoration: underline;
}

Ici l'avant dernier élément des listes sera toujours souligné.


X:nth-of-type(n)

Cette pseudo-classe permet de cibler un ou plusieurs éléments en fonction de l'ordre d'origine selon une formule construite en utilisant la syntaxe an+b.

li:nth-of-type(3n+2)  {
    background: #ccc;
}

Dans cet exemple les éléments 2, 5, 8, 11, 14, 17... d'une liste auront un fond gris.

Plus simple

ul:nth-of-type(1)  {
    background: #ccc;
}

Dans cet exemple la 1ere liste d'éléments aura un fond gris.


X:first-child

Cette pseudo-classe permet de cibler le premier enfant de son parent.

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

Ici on désactive la bordure du haut du premier élément d'une liste.


X:last-child

Cette pseudo-classe permet de cibler le dernier enfant de son parent.

ul li:last-child  {
    border-bottom: none;
}

Ici on désactive la bordure du bas du dernier élément d'une liste.


X:only-child

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

div p:only-child  {
    font-style: italic;
}

Dans cet exemple s'il n'existe qu'un seul paragraphe dans un div, alors il sera mis en italique.
S'il y en a plus d'un, tous les paragraphes resteront par défaut.


X:only-of-type

Permet de cibler tous les éléments sans aucun frère au sein de l'élément parent.

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

Ici seuls les éléments uniques d'une liste imbriquée seront mis en gras.


X:first-of-type

Cette pseudo-classe permet de cibler un élément qui est le premier enfant de son type dans la liste des enfants de l'élément parent. Il est similaire à nth-of-type(1).

p:first-of-type  {
    color: blue;
}

Ici chaque premier type d'élément compris dans un paragraphe sera bleu. Imaginons qu'il y ait plusieurs <em>, <strong> et <span>, chaque premier élément <em> <strong> <span> sera de couleur bleu, tous les autres resteront de la couleur par défaut.


Vous avez aimé cet article, partagez-le !

 
     

Logo des hirondelles du net

Quand je serai grand, je m'achèterai une classe, rien que pour jouer dedans

René Goscinny