Sommaire
Wahou! pour quelle raison parler de sélecteurs CSS?
Parce que tu te poses la question déjà ;-). Et parce que c’est l’arme absolue du web designer.
Et que, si tu comprends ça, tu peux tout exploser! On y va?
Blague à part, j’ai remarqué que nombre de mes apprentis, stagiaires, collaborateurs ne comprenaient pas ou ne connaissaient pas la puissance des sélecteurs CSS.
Back to Basics, Duh! un sélecteur?
Un “sélecteur (selector)” CSS représente tout ou partie de la structure d’un “contenu” d’une page HTML. Un sélecteur CSS correspond a un nœud dans la structure du document ou à un “paramètre (attribut)” de ce nœud.
Une fois que j’ai dit ça, et bien j’ai presque tout dit 😉
Le sélecteur dépend de la racine (root). C’est la branche d’un arbre, en relation avec le(s) nœud(s) qui le précède(nt) et le nœud qui descend(ra) de lui…
Il a ses attributs. Vous noterez qu’ID, Class, Style, Href etc… sont des ‘Attributs’ d’un élément.
[IMG]
Si je cible, voire j’évite de manière explicite, un nœud, une entité, je peux avec un peu de CSS et d’HTML influer sur son affichage, l’interactivité, m’adapter à toutes les tailles d’écrans, …
Conditionnel
Un sélecteur peut être utilisé comme une condition (e.g. dans une règle CSS) qui déterminera les comportements des éléments d’un sélecteur enfant (Child) dans l’arborescence du document (en cascade, le C de css).
Imaginez les selecteurs css comme des cibles sur lesquelles nous, designers/développeurs, pouvons agir, changer aspect, positionnement, couleur, … des éléments.
En utilisant les conventions de cette série d’articles, on pourra donc “pointer” des éléments avec ± de précision, avec plus ou moins de priorité.
Il existe une foule de sélecteurs CSS du plus simple, l’élément lui même (body, p, h1 etc…) au plus subtil.
Vous trouverez des tas de très bons articles sur le sujet dont notamment la page de la W3C [lnk]
Bon c’est parti, on reprend les bases. Du plus générique au plus “étrange”.
On regroupe les sélecteurs par type.
Types de sélecteurs
- Sélecteurs élémentaires (Elemental selectors),
- Sélecteurs d’attribut (Attribute Selectors),
- Les pseudos-classes de localisation (Location pseudo-classes),
- Les pseudos-classes d’action utilisateur (User Action pseudo-classes),
- Les pseudos-classes de Structure Arborescente (Tree-Structural pseudo-classes),
- Les pseudos-classes d’Input (Location pseudo-classes),
- Les pseudos-classes d’état de ressource (Resource State pseudo-classes),
- Les pseudos-classes de temporalité (Time-dimensional Pseudo-classes),
- Les pseudos-classes linguistiques (linguistic Pseudo-classes),
- Les Sélecteurs de Structure de Grille (Grid-Structural selectors),
- Les combinateurs,
- Les combinateurs logiques.
Sélecteurs élémentaires
[*]
Le sélecteur universel désigne tous les éléments.
Ce sélecteur est gourmand (greedy). On s’en sert peu sauf au départ d’une feuille de style pour mettre le pendule à zéro (cf.xxxx)/.
Type (tag name) selectors
[element]
Une balise HTML (élément/entité/nœud) connue (ou non*) qui encadre (2 exceptions) son contenu ainsi [<element></element>] . Ça peut être un paragraphe [<p>], un titre [<h1…h6>], un bloc [<div>], une accentuation [<em>, <strong>,…], un lien [<a>], etc…
notation css :
HTML-node{}par exemple :h1 { font-weight:801; }
[.]
la class(e) d’un élément HTML [<div class=“maClasse”>]. Tous les éléments ayant une même classe seront influencés par la déclaration CSS de cette classe.
notation css =
.className {}[#]
l’identififiant, c’est l’attribut ID de l’élément HTML visé [<div id=“monIdentifiantUnique”>]. Un ID doit être unique par page HTML (sinon on utilisera une classe).
Tous les éléments ayant un même ID, à travers un site seront influencés par la déclaration CSS de cet ID.
notation css :
#myID {}
Déjà, avec ces éléments on peut faire pas mal de choses. Dans la deuxième partie, nous parlerons des sélecteurs d’Attributs.
Part 1 - Introduction
