Précisions sur les sélecteurs — Alexandre Niveau

Rappels

On a vu trois sortes de sélecteurs

Sélectionner les élements d'un certain type : le sélecteur est simplement le nom du type. Exemples : nav, em…
Sélectionner les éléments d'une certaine classe : le sélecteur est un point (.) suivi du nom de la classe. Exemples : .info-complementaire, .photo…
Sélectionner les éléments d'un certain identifiant : le sélecteur est un « croisillon » (#) suivi du nom de l'identifiant. Exemples : #pied-de-page, #item-actif…

On a aussi vu deux façons d'associer des sélecteurs

Avec des virgules, on peut appliquer une règle aux éléments qui satisfont un sélecteur parmi plusieurs (disjonction). Exemple : h1,p,.toto sélectionne les éléments de type h1, les éléments de type p, et les éléments de classe toto.
En séparant deux sélecteurs par une espace (combinaison), on met une contrainte sur l'élément sélectionné ainsi que sur ses parents. Exemple : .toto p sélectionne les paragraphes dont au moins un parent est de classe toto.

Conjonction de sélecteurs

Une façon de combiner les sélecteurs que l'on n'a pas encore vue est la conjonction (qui correspond à l'opérateur logique « et »)

Permet de sélectionner des éléments qui doivent satisfaire plusieurs sélecteurs à la fois

Pour obtenir cette combinaison, il suffit de regrouper les sélecteurs ensemble, sans espaces

Ex: img#toto.intro sélectionne les éléments de type img ayant l'identifiant toto et la classe intro.

NB: on ne peut pas faire la conjonction de sélecteurs d'éléments, mais c'est pas grave

Association de différents types de sélecteurs

Il peut être utile d'associer un sélecteur de classe avec un sélecteur de type d'élément
Exemple : j'ai une page sur des opérations mathématiques. Je veux mettre en valeur les noms des opérations dans le texte. Chaque opération a également un encadré avec plus d'informations. Je peux utiliser le CSS suivant :
```
span.operation {
    font-weight: bold;
}

aside.operation {
    border: 2px solid black;
    float: right;
}
```
Intérêt : pas besoin d'une classe différente pour les deux utilisations, on s'appuie sur la structure du document.
En pratique, c'est rarement utile et c'est même une assez mauvaise idée, pour des raisons de maintenance :
1. c'est plus facile de s'y retrouver dans son CSS si les noms de classes ne sont utilisés que pour un seul usage précis
2. il faut éviter de rendre le CSS trop dépendant du HTML : si on décide de remplacer le aside par un autre élément, on casse tout alors que les classes ne servent que pour le CSS, pas de raison de les changer

Classes multiples

On peut mettre plusieurs classes sur un élément HTML. Syntaxe :
```
<div class="foo bar">je suis de classe foo et de classe bar!</div>
```
⇒ on sépare les classes par des espaces dans l'attribut class
Avec le CSS suivant
```
.foo { color: yellow; }
.bar { border: solid 4px red; }
```
l'élément sera en jaune avec une bordure rouge.
C'est une bonne chose : on peut mutualiser davantage de code. Exemple d'utilisation Trouver un meilleur exemple, qui montre davantage la notion d'orthogonalité + ne donne pas d'exemple de classes co-dépendantes…
Note : rien n'empêche de sélectionner les éléments qui ont plusieurs classes à la fois
```
 .foo.bar { border-style: dashed; }
```
Peut être utile, mais pas évident à maintenir : en général on essaie plutôt d'éviter que les classes dépendent les unes des autres.

TODO: voir ce que je fais de ça. c'est pas entièrement pertinent.

Combiner `id` et `class`

Utiliser id pour les propriétés uniques d'un élément
Utiliser class pour des propriétés partagées (ou s'il y a une sémantique derrière la présentation)

Exemple : montrer du code

Page avec 2 menus (d'identifiants #menu1 et #menu2), de style identique, sauf que l'un est en bleu et l'autre en rouge.
On leur met une classe menu, pour ce qui est commun, et on utilise les identifiants pour changer simplement les couleurs
D'autre part, on utilise .menu a pour styler les liens des menus
⇒ pas besoin de nouvelle classe lienMenu
⇒ inutile de dupliquer les propriétés avec 2 sélecteurs #leftMenu a et #rightMenu a

à caser :

* Identifiants : ils ne sont pas interdits, mais leur utilisation doit être justifiée. Normalement ils doivent servir pour modifier le style d'un élément précis, sans qu'il y ait de catégorie/sémantique associée. Typiquement, pour styler le menu principal, une classe est a priori plus appropriée (même s'il n'y a bien sûr qu'un seul menu principal sur la page). Mais ici encore c'est très subjectif (encore davantage que l'équilibre structure/classes). Les correcteurs/trices sont libres d'interdire les identifiants ou au contraire de les autoriser un peu plus largement.

Spécificité des sélecteurs

Plusieurs sélecteurs peuvent donner des valeurs différentes à une même propriété
Règle de base en CSS : c'est le dernier qui gagne
En réalité, ce n'est pas toujours le cas : c'est le plus spécifique qui gagne
On calcule la spécificité d'un sélecteur comme indiqué ici (voir aussi cet article plus visuel sur CSS-Tricks et cet article qui explique le calcul avec des personnages de Star Wars).
Une astuce : en utilisant le sélecteur [id="toto"] plutôt que #toto, on vise le même élément mais avec une spécificité moindre
Plus d'explications dans cette démo : Illustration des effets inattendus de la spécificité exemple plus concret et plus court ?
Au passage, on peut forcer une propriété à s'appliquer avec !important. Ne pas le faire dans du vrai code : ça complique (encore plus) le débogage et la maintenance. Ça peut être utile pour tester ou déboguer (ou dans les cas où on doit ajouter des styles par-dessus du CSS qu'on ne contrôle pas).

* :where et :is
* CSS layers ! super explications sur la cascade dans cet article

Héritage

Dans l'exemple suivant, les deux propriétés CSS se comportent de manière différente

<article>
    <h2>Titre de l'article</h2>
    <p>Un paragraphe: mon article est <em>vraiment</em> super.</p>
    Ce texte n'est pas dans un paragraphe.
</article>

article {
    font-style: italic;
    border: 3px dotted red;
}

Seule la boîte de l'article a une bordure, mais alors pourquoi le h2 est en italique ?

Contrairement à border, font-style est une propriété héritable

Chaque élément hérite de toutes les propriétés héritables de ses ancêtres

Le font-style du h2 est donc hérité de celui de l'article (c'est-à-dire qu'il prend la valeur italic)

En revanche le border du h2 est celui par défaut (c'est-à-dire pas de cadre)

Héritage jusqu'aux feuilles de l'arbre généré par le DOM

Si on veut que les em ne soient pas en italique, on est obligé de le dire explicitement

(j'enlève car les propriétés plus récentes initial, unset et surtout revert sont plus adaptées de toute façon) -- Inversement, on peut forcer une propriété à être héritée avec la valeur spéciale inherit (très utile comme « valeur par défaut » pour les propriétés héritables)

En général on devine intuitivement quelles propriétés sont héritables ou non (regarder une réf en cas de doute)

Annuler une propriété CSS

Parfois on a spécifié une propriété CSS pour un cas général, et on a besoin de l'« annuler » pour un cas particulier

Cela arrive notamment avec les media queries

On peut utiliser les valeurs spéciales initial, inherit, unset, et surtout revert

initial revient à la valeur « par défaut » de la propriété : par exemple pour color, c'est black
inherit force à hériter de la valeur du parent : typiquement plus approprié justement pour color, mais pas pour d'autres
unset est plus pratique : revient à faire inherit pour les propriétés héritables (comme color), et initial pour les autres (comme background).
revert fonctionne comme unset, sauf qu'il ne remet pas les propriétés complètement à zéro, mais revient à la valeur qu'elles ont dans la feuille de style du navigateur. ⇒ on annule vraiment la modification, sans effet de bord. exemple: display:unset vaudra toujours `inline`, car c'est la valeur initiale de display. C'est indépendant de l'élément.

De façon générale, il vaut mieux toujours utiliser revert, sauf si vous savez vraiment ce que vous faites ou si le résultat ne vous convient pas…

le shorthand all est aussi utilisable partout (pas vraiment utile d'en parler en L1) spec