Les sélecteurs CSS
Les sélecteurs de base, les balises HTML
Les premiers sélecteurs à connaitre sont les balises html elles-mêmes. Quand on utilise une balise, on designe tous les éléments de ce type là en une seule fois.
p{
color: red;
}
Avec ce code, ce sont TOUS les paragraphes de notre site que seront affichés en rouge.
Les sélecteurs imbriqués
Sur la continuité des sélecteurs simples, les sélecteurs imbriqués utilisent également les balises HTML mais avec leur position dans le DOM, leur imbrication.
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid porro in deleniti, laboriosam at odio nesciunt eius similique rem veniam minima temporibus qui. Labore unde, delectus est dicta nobis quia.</p>
<article>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid porro in deleniti, laboriosam at odio nesciunt eius similique rem veniam minima temporibus qui. Labore unde, delectus est dicta nobis quia.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid porro in deleniti, laboriosam at odio nesciunt eius similique rem veniam minima temporibus qui. Labore unde, delectus est dicta nobis quia.</p>
</article>
Il est possible, avec les sélecteurs imbriqués, de ne designer QUE les paragraphes contenus dans l'article, sans toucher celui placé à l'extérieur, en tout premier.
article p{
color: green;
}
Seuls les 2 paragraphes de l'article sont en vert. C'est l'espace placé entre article et p qui indique l'imbrication. On pourrait lire cela ainsi : "dans un article, si tu vois un p alors tu appliques les règles css suivantes".
Les ID
Les attributs ID permettent d'identifier de manière unique un élément.
<article>
<p>paragraphe</p>
<p id="cible">paragraphe</p>
<p>paragraphe</p>
</article>
#cible{
color: pink;
}
Seul le paragraphe qui a un attribut id="cible" sera en rose. Mais chaque P qui a une id="cible" dans nos pages HTML sera en rose.
Pour respecter les règles du HTML, il ne peut y avoir qu'un seul ID portant la même valeur dans une page HTML. Par exemple, je peux écrire id="pomme" une seule fois mais je peux écrire id="pomme1" et id="pomme2" dans la même page également.
Il est aussi possible d'être spécifique sur l'application de l'id.
<article>
<p>paragraphe</p>
<p id="cible">paragraphe</p>
<p>paragraphe</p>
</article>
section#cible{
color: red;
}
Ce code ne produira aucun effet car l'id="cible" est associé à une section et seulement une section.
Le fait de coller deux sélecteurs comme ici SECTION et #cible les rend dépendants. On peut lire : la section qui a une id="cible".
Les classes
Les classes fonctionnent comme les ID. Elles permettent de cibler un ou des éléments spécifiquement. La diffférence réside dans le fait qu'on peut utiliser la même classe plusieurs fois dans une même page HTML.
<article>
<p>paragraphe</p>
<p class="cible">paragraphe</p>
<p class="cible">paragraphe</p>
</article>
.cible{
color: orange;
}
Seuls les 2 paragraphes qui ont l'attribut class="cible" seront en orange.
La même spécificité peut être utilisée pour les classes.
section p.cible{
color: purple;
}
Ce code ne produira aucun effet car l'espace entre les sélecteurs indique une imbrication. On veut donc mettre en purple les P qui ont un attribut class="cible" mais uniquement s'ils sont enfant d'une balise SECTION, ce qui n'est pas le cas ici !
Eviter les répétitions avec la virgule
La virgule peut se traduire par ET. Elle va permettre d'affecter les mêmes propriétés à plusieurs éléments.
article p.orange,
section p.orange,
#orange{
color: orange
}
Seront mis en orange les P qui sont dans un article ou dans une section ainsi que tous les éléments qui ont un attribut id="orange", quelle que soit la balise.
Exercice
Que va produire ce code ?
<main>
<article>
<p>paragraphe</p>
<p>paragraphe</p>
</article>
<section>
<p>paragraphe</p>
<p>paragraphe</p>
</section>
</main>
section p{
color: red;
}
Correction
Seuls les deux derniers paragraphes seront en rouge car ils sont contenus dans une section.
Exercice
Je veux mettre le texte "coucou" en orange, comment puis-je faire ?
<main>
<article>
<p>paragraphe</p>
<p>paragraphe</p>
<p>coucou</p>
<p>paragraphe</p>
<p>paragraphe</p>
</article>
</main>
Corrigé
Il y a plusieurs solutions : une class ou une id.
<main>
<article>
<p>paragraphe</p>
<p>paragraphe</p>
<p class="orange">coucou</p>
<p>paragraphe</p>
<p>paragraphe</p>
</article>
</main>
.orange{
color: orange
}
OU
<main>
<article>
<p>paragraphe</p>
<p>paragraphe</p>
<p id="orange">coucou</p>
<p>paragraphe</p>
<p>paragraphe</p>
</article>
</main>
#orange{
color: orange
}
Exercice
Je veux mettre le texte "coucou" en orange, comment puis-je faire ?
<main>
<article>
<p>coucou</p>
<p>paragraphe</p>
<p>coucou</p>
<p>paragraphe</p>
<p>coucou</p>
</article>
</main>
Corrigé
Cette fois-ci, une seule solution possible. On ne peut pas utiliser une ID plusieurs fois, on doit donc utiliser une class.
<main>
<article>
<p class="orange">coucou</p>
<p>paragraphe</p>
<p class="orange">coucou</p>
<p>paragraphe</p>
<p class="orange">coucou</p>
</article>
</main>
.orange{
color: orange
}
Exercice
Je veux mettre les mots "hello" en orange, quel est le code css à utiliser ?
<header>
<h1>Hello</h1>
</header>
<article>
<p>hello</p>
<div>lorem ipsum</div>
</article>
<section>hello</section>
<footer>hello</section>
Corrige
h1,
article p,
section{
color: orange;
}
OU
header h1,
article p,
section{
color: orange;
}
Mais cela est inutile car le H1 est normalement unique pas page HTML...