Les sélecteurs CSS avancés indispensables

* (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:link

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

a:link  {
    text-decoration: none;
}

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 1^ere 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.

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