Arts numériques

Rappel : sélectionner les éléments directement

Atteindre un tag

a {
  color:red;
  text-decoration:none;
}

Atteindre un id

#truc {
  color:yellow;
  font-size:3em;
}

Atteindre une classe

.machin {
  color:green;
  margin-bottom:1em;
}

Combinaisons

Associer sans espace deux sélecteurs permet de joindre un élément qui possède les deux sélecteurs en même temps. C’est donc une sélection plus précise.

<div class="machin">Un élément</div>


div {} /* sélectionne tous les div */
.machin {} /* sélectionne tous les éléments avec la classe machin */
div.machin {} /*  sélectionne les div ayant la classe machin */

Permet d’atteindre un élément div qui possède la classe "machin"

<h1 id="truc">Titre</h1>

h1 {}
#truc {}
h1#truc {}

Permet d’atteindre un élément h1 qui possède l’id "truc"

<p id="truc" class="machin">Classe et id sur un élément<p>

#truc {}
.machin {}
#truc.machin {}

Permet d’atteindre un élément qui possède àla fois l’id "truc" et la classe "machin"

.bazar.machin {}
Permet d’atteindre un élément qui possède àla fois la classe "bazar" et la classe "machin"

<p class="bazar machin">

Sélectionner plusieurs éléments

.truc, #machin, article {}

permet d’atteindre la classe truc ET l’id machin ET les tags articles. Une virgule permet donc de sélectionner plusieurs éléments distincts.

Sélectionner un élément se trouvent àl’intérieur d’un autre

article .bloc permet de sélectionner un élément comportant la classe bloc qui est l’enfant d’un tag article. L’espace désigne donc une relation parent/enfant. Le plus simple est de lire la déclaration àl’envers : un élément comportant la classe bloc àl’intérieur d’un tag article, donc.

<div class="bloc">Cet élément ne sera pas sélectionné</div>
<article>
    <div class="bloc">Celui-ci sera sélectionné</div>
    <p><span class="bloc">Celui-ci aussi sera sélectionné</span></p>
</article>

Il est ànoter que l’élément .bloc ne doit pas nécessairement se trouver directement àl’intérieur de la balise article. Il peut être dans un sous-élément, comme le montre l’exemple de l’élément span ci-dessus.

Sélection par un attribut

CSS3 ajoute de nombreux sélecteurs. L’un d’eux est particulièrement utile : la sélection par attribut.
[data-truc] {}
permet de sélectionner les éléments

<article data-truc="un">Un élément<article>
<section data-truc="deux">Un autre</section>
<section data-truc="une">Un troisième</section>
<section data-truc="fun">Un troisième</section>

Il est aussi possible d’être plus précis :
[data-truc="un"]
permet de sélectionner uniquement l’article dont l’attribut data-truc contient "un".
tandis que
[data-truc^="un"]
permet de sélectionner un élément dont l’attribut data-truc commence par "un". Dans ce cas, l’élément dont l’attribut data-truc est "une" sera aussi sélectionné.

[data-truc*="un"]
permet de sélectionner un élément dont l’attribut data-truc contient quelque part "un". Dans ce cas, les éléments dont l’attribut data-truc est "un", "une" et "fun" seront sélectionnés.

On peut aussi écrire évidemment
article[data-truc="un"]
pour sélectionner les articles dont l’attribut data-truc est "un".

La documentation en ligne

sur le site du W3C.
sur le site de la mozilla fondation, en français.