Sélecteurs CSS

Introduction aux sélecteurs CSS

Code:: <div class="box" id="12">Hello!<div>

Un sélecteur CSS cible l'élément HTML auquel on va apporter des modifications. Les plus connus cible l'élément HTML par son identifiant. Pour cibler l'exemple, on pourrait utiliser div { } ou .box { } ou encore #12 { }

Mais il existe des dizaines d'autre façon de faire !

Dans le cas où des élément de Forumactif ne sont pas disponibles dans les templates ou cachés dans des variables, certain sélecteur méconnu s'avère particulièrement utile pour personnaliser son forum.

Sélecteur global

*Sélectionne tous les éléments

Sélecteurs

SélecteurSélectionne le/les éléments...

divavec les balises <div>

.box avec class="box"

#12 avec id="12"

Sélecteurs avec attribut
Utile pour sélectionner les liens d'un membre précis, une page de formulaire, ...

SélecteurSélectionne les éléments...

[href] avec l'attribut href=""

[href="blank-theme.com"] avec l'attribut href qui contient strictement "blank-theme.com"

[href~="blank"]avec l'attribut href qui contient une fois "blank"

[href*="/"]avec l'attribut href qui contient au moins un "/"

[href^="blank"]avec l'attribut href qui commence par "blank"

[href$=".com"]avec l'attribut href qui termine par ".com"

Combinaisons de sélecteurs

CombinaisonSélectionne les...

.box, .textclass .box et .text

.box pbalises <p> contenu dans .box

.box > aliens qui sont l'enfant directe de .box

.box + imgimages situées directement après les .box

.box ~ imgimages situées après les .box

Pseudo sélecteurs

PseudoSélectionne les...

:hoveréléments survolés

:emptyéléments vides

a:not(.text)les liens qui n'ont pas de class .text

box:has(a)les .box qui contiennent des liens

a:first-childle premier lien

a:last-childle dernier lien

a:nth-child(x)le lien numéro x

a:first-of-typele premier élément de type lien

a:last-of-typele dernier élément de type lien

a:nth-of-type(x)le numéro x de type lien

Les pseudo sélécteur nth-child et nth-of-type peuvent contenir la valeur even/odd pour sélectionner tous les éléments paires ou impaires ! Lisez la documentation pour aller plus loin.

Les sélecteurs sont très puissants ! Il existe une multitude de combinaison avec les éléments listés ci-dessus. Si vous doutez d'une combinaison, testez-la quand même pour essayer !

Voici quelques jeux qui permettent de pratiquer : CSS Diner - CSS selectors cheatsheet

Sélecteurs CSS

Introduction aux sélecteurs CSS

Airpéger

Bottin des RPG

La Piscine