nav, em… .) suivi du nom de la classe.
Exemples :
.info-complementaire, .photo… #) suivi du nom de l'identifiant.
Exemples :
#pied-de-page, #item-actif… h1,p,.toto sélectionne les éléments de type
h1, les éléments de type p,
et les éléments de classe toto.
.toto p sélectionne les paragraphes dont au moins un parent est de
classe toto.
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.
span.operation {
font-weight: bold;
}
aside.operation {
border: 2px solid black;
float: right;
}
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<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
.foo { color: yellow; }
.bar { border: solid 4px red; }
l'élément sera en jaune avec une bordure rouge. .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.Comme toujours en informatique, on cherche à factoriser au maximum son code CSS, c'est-à-dire à éviter les répétitions (principe DRY).
Objectif visé : principalement la facilité de maintenance
Voir le tutoriel sur la factorisation CSS de Jean-Marc Lecarpentier
id et classid pour les propriétés uniques d'un élémentclass pour des propriétés partagées (ou s'il y a une sémantique derrière la présentation)#menu1 et #menu2),
de style identique, sauf que l'un est en bleu et l'autre en rouge.menu, pour ce qui est commun, et
on utilise les identifiants pour changer simplement les couleurs.menu a pour styler les liens des menus lienMenu#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.
[id="toto"] plutôt que #toto, on vise le même élément mais
avec une spécificité moindre!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).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éritées (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
De façon générale, on essaie d'éviter que le CSS dépende trop de la structure du HTML
Notamment, il faut faire attention aux sélecteurs trop génériques
Vous utilisez souvent directement les éléments suivants comme sélecteurs, parce qu'il n'y a pas d'ambiguïté dans vos pages :
header { /* ... */ }
footer { /* ... */ }
nav { /* ... */ }
article { /* ... */ }
section { /* ... */ }
aside { /* ... */ }
header, footer, nav, etc. dans une page HTML. Même si ce n'est pas le cas de votre page pour l'instant, il faut prévoir qu'elle puisse évoluer.
aside en article voire en div)
Par exemple, la règle suivante s'appuie trop sur la structure du HTML :
```css
header nav ul li a {
color: pink;
}
```
Ce sélecteur n'est pas très robuste (la structure du HTML ne doit surtout pas changer : on ne peut pas mettre le menu ailleurs que dans un `header`, et le style s'appliquera aussi si on met d'autres `header` et d'autres `nav` dans la page, ce qu'on ne veut pas forcément) et pas très lisible (on ne sait pas pourquoi on applique cette règle). De plus le sélecteur est inutilement long si le `nav` ne contient qu'un `ul`. Il serait plus approprié de mettre une classe « `menu-principal` » au `nav`, et d'écrire la règle comme suit :
```css
.menu-principal a {
color: pink;
}
```
Tous les défauts de la règle précédente sont évités.
À l'inverse, si vous n'utilisez que des classes, c'est-à-dire que vous mettez une classe différente à tous les éléments à styler et que toutes vos règles sont de la forme
```css
.lien-bibliographie {
color: pink;
text-decoration: none;
}
```
ce n'est pas bon non plus, car le CSS ne donne aucune indication sur la structuration de la page (par exemple, pourquoi préciser « `text-decoration: none` » ici ? Il serait probablement plus approprié de mettre une classe au bloc englobant et d'utiliser celle-ci dans le CSS :
```css
.bibliographie a {
color: pink;
text-decoration: none;
}
```
Ici il est plus clair que l'on enlève le soulignement par défaut de l'élément `a`.
Il n'est pas toujours évident de trouver un bon équilibre, et les critères peuvent être assez subjectifs : vérifiez auprès de votre chargé·e de TP puisque c'est lui/elle qui corrigera ! Mais dans tous les cas vous devez éviter ces deux extrêmes.
#entete .menu ul li a.menu a (on sélectionne les liens du menu).
S'il y a plusieurs sortes de liens dans le menu, alors il vaut mieux leur donner des classes distinctes.Une stratégie pour éviter ces problèmes peut être de n'utiliser que des classes, c'est-à-dire de créer une classe à chaque fois qu'on a besoin de styler un élément, et de n'avoir que des sélecteurs avec une seule classe.
On évite effectivement la dépendance à la structure du HTML, mais cela devient vite très lourd à maintenir, et le CSS est moins facile à lire puisqu'il donne peu d'indications sur la structuration de la page et les éléments à styler. Exemple :
.lien-bibliographie {
color: pink;
text-decoration: none;
}
pourquoi préciser ici text-decoration: none ? Il serait probablement plus approprié de mettre une classe au bloc englobant et d'utiliser celle-ci dans le CSS :
.bibliographie a {
color: pink;
text-decoration: none;
}
Ici il est plus clair que l'on enlève le soulignement par défaut de l'élément a.
Il n'est pas toujours évident de trouver un bon équilibre, et les critères peuvent être assez subjectifs ! Mais dans tous les cas il faut éviter les deux extrêmes (aucune classe / que des classes).
<link rel="stylesheet"> dans le head@import…
@import url("mystyle.css"); pour importer une CSS@import : empêche le téléchargement des CSS en parallèle, ce qui bloque le rendu<link rel="stylesheet"> dans le HTML :
les fichiers peuvent être chargés en parallèle.