Les sélecteurs CSS

Universel

* {
    color: yellow;
}

Tous les éléments seront écrits en jaune.

class

.main_p {
    color: yellow;
}

Je sélectionne tous les éléments portant la classe main_p.

.main_p.quote_p {
    color: yellow;
}

Je n'ai pas d'espace entre les deux déclarations de classe, je veux donc un élément qui porte la classe main_p ET quote_p.

.main_p .quote_p {
    color: yellow;
}

J'ai un espace entre les deux déclarations de classe, je veux donc un élément qui porte la classe quote_p et qui est un descendant d'un élément portant la classe main_p.

Exemple :

<div class="main_p">
    <p class="quote_p">OUI</p>
</div>

id

#main_p {
    color: yellow;
}

Je sélectionne un élément portant l'id main_p. À noter qu'on ne peut avoir l'écriture #main_p#quote_p vu qu'un élément ne peut avoir qu'un seul id, comme dit dans l'introduction au HTML.

Éléments

p {
    color: yellow;
}

Tous les paragraphes seront écrits en jaune.

multi-selection

Plusieurs éléments

p, div {
    color: yellow;
}

Tous les paragraphes ET toutes les div seront écrits en jaune.

Enfant de...

div p {
    color: yellow;
}

Tous les paragraphes qui sont des descendants d'une div seront écrits en jaune.

> - directement enfant de...

div > p {
    color: yellow;
}

Tous les paragraphes qui sont des enfants directs d'une div seront écrits en jaune :

<div>
    <p>OUI</p>
</div>

<div>
    <header>
        <p>NON</p>
    </header>
</div>

+ - Suivi par...

div + p {
    color: yellow;
}

Tous les paragraphes qui suivent directement une div seront écrits en jaune :

<div></div>
<p>OUI</p>
<p>NON</p>

~ - Directement suivi par...

div ~ p {
    color: yellow;
}

Tous les paragraphes du même niveau qui sont précédés par une div, au même niveau de profondeur HTML, seront écrits en jaune :

<section>
    <p>NON</p>
    <div></div>
    <p>OUI</p>
    <p>OUI</p>
</section>
<p>NON</p>

Attention, ce sont les éléments du même niveau. Le dernier paragraphe n'est pas concerné parce qu'il n'est pas au même niveau, il se trouve au niveau supérieur.

Parentalité

First-child

div p:first-child {
    color: yellow;
}

Tous les paragraphes qui sont le premier enfant d'une div seront écrits en jaune :

<div>
    <p>OUI</p>
    <p>NON</p>
    <p>NON</p>
</div>

last-child

div p:last-child {
    color: yellow;
}

Tous les paragraphes qui sont le dernier enfant d'une div seront écrits en jaune :

<div>
    <p>NON</p>
    <p>NON</p>
    <p>OUI</p>
</div>

nth-child

div p:nth-child(2) {
    color: yellow;
}

Tous les paragraphes qui sont le deuxième enfant d'une div seront écrits en jaune :

<div>
    <p>NON</p>
    <p>OUI</p>
    <p>NON</p>
</div>

Attention avec les *-child Ici on parle bien de la numérotation direct. Exemple :

div p:nth-child(2) {
    color: yellow;
}

<div>
    <div>NON</div>
    <p>OUI</p>
    <p>NON</p>
</div>

On voit que c'est bien le deuxième p qui est sélectionné même s'il est le premier paragraphes, il reste le deuxième enfant de sont parent.

Attention, beaucoup de langages informatiques commencent les listes à 0. En CSS le premier élément est le numéro 1.

first-of-type

div p:first-of-type {
    color: yellow;
}

Tous les paragraphes qui sont le premier élément de leur type et descendants d'une div seront écrits en jaune :

<div>
    <div>NON</div>
    <p>OUI</p>
    <p>NON</p>
    <p>NON</p>
    <div>NON</div>
</div>

last-of-type

div p:last-of-type {
    color: yellow;
}

Tous les paragraphes qui sont le dernier élément de leur type et descendants d'une div seront écrits en jaune :

<div>
    <div>NON</div>
    <p>NON</p>
    <p>NON</p>
    <p>OUI</p>
    <div>NON</div>
</div>

nth-of-type

div p:nth-of-type(2) {
    color: yellow;
}

Tous les paragraphes qui sont le deuxième élément de leur type et descendants d'une div seront écrits en jaune :

<div>
    <div>NON</div>
    <p>NON</p>
    <p>OUI</p>
    <p>NON</p>
    <div>NON</div>
</div>

Seul au monde

only-of-type

div p:only-of-type {
    color: yellow;
}

Tous les paragraphes qui sont les seuls éléments de leur type et descendants d'une div seront écrits en jaune :

<div>
    <div>NON</div>
    <p>OUI</p>
    <div>NON</div>
</div>

only-child

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

Tous les paragraphes qui sont les seuls enfants et descendants d'une div seront écrits en jaune :

<div>
    <p>OUI</p>
</div>
<div>
    <div>NON</div>
    <p>NON</p>
    <div>NON</div>
</div>

Attributs

attribut présent

p[title] {
    color: yellow;
}

<p>NON</p>
<p title="coucou">OUI</p>

attribut présent avec une valeur précise

p[title="coucou"] {
    color: yellow;
}

<p title="hello">NON</p>
<p title="coucou">OUI</p>

attribut présent avec une valeur contenant un mot

p[title="flower"] {
    color: yellow;
}

<p title="green leaf">NON</p>
<p title="green flower">OUI</p>

attribut présent avec une valeur commençant par le mot

p[title|="fr"] {
    color: yellow;
}

<p title="fr_FR">NON</p>
<p title="fr-FR">OUI</p>
<p title="en-US">NON</p>

On voit ici que deux termes reliés par un tiret sont considérés comme deux mots différents, là où deux termes reliés par un underscore sont considérés comme un seul et même mot.

attribut présent avec une valeur commençant par un terme

p[title^="fr"] {
    color: yellow;
}

<p title="fr_FR">OUI</p>
<p title="fr-FR">OUI</p>
<p title="en-US">NON</p>

attribut présent avec une valeur finissant par un terme

p[title$="pdf"] {
    color: yellow;
}

<p title="image.webp">NON</p>
<p title="fichier.pdf">OUI</p>

attribut présent avec une valeur contenant un terme

p[title*="test"] {
    color: yellow;
}

<p title="m_test_p">OUI</p>

Selon un état

Lien actif

a:active {
    color: yellow;
}

Checkbox ou bouton radio coché

input:checked {
    color: yellow;
}

Élément de formulaire désactivé

textarea:disabled {
    color: yellow;
}

Élément de formulaire non désactivé

textarea:enabled {
    color: yellow;
}

Élément qui a le focus

input:focus {
    color: yellow;
}

Élément survolé par la souris

textarea:hover {
    color: yellow;
}

Tous les liens non visités

a:link {
    color: yellow;
}

Tous les liens visités

a:visited {
    color: yellow;
}

Élément de formulaire non obligatoire

select:optional {
    color: yellow;
}

Élément de formulaire obligatoire

select:required {
    color: yellow;
}

Élément de formulaire en mode lecture seule

textarea:read-only {
    color: yellow;
}

Élément de formulaire ouvert à l'écriture

textarea:read-write {
    color: yellow;
}

Le sélecteur grognon

Avec le sélecteur :not() on inverse n'importe quel autre sélecteur :

p:not(:hover) {
    color: yellow;
}

...on sélectionne alors tous les paragraphes qui ne sont pas survolés par la souris, ou :

p:not(:first-child) {
    color: yellow;
}

...tous les paragraphes qui ne sont pas le premier enfant.

Pseudo-éléments

::background

Le backdrop va ajouter un pseudo-élément sous l'élément sélectionné et lui appliquer un style.

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

Très utile par exemple pour les fenêtre de dialogue.

::after, ::before

Deux pseudo-éléments qui permettent d'ajouter un élément avant ou après l'item sélectionner en CSS. Ces éléments doivent obligatoirement avoir la clé "content", au moins à vide.