combinaison
Vous n'êtes pas obligé de répéter plusieurs sélecteurs avec les mêmes attributs, il vous suffit de séparer les sélecteurs par des virgules (,).
Par exemple, vous avez le code suivant :
h2 { couleur : rouge }
.thisAutreClass { couleur : rouge }
.yetAnotherClass { couleur : rouge }
Ensuite, vous pouvez écrire :
h2, .thisOtherClass, .yetAnotherClass { couleur : rouge }
Grâce à la composition, vous pouvez définir plusieurs CSS à la fois, ce qui vous fait gagner beaucoup d'octets et de temps.
Imbriqué
Si CSS est bien structuré, il n'est pas nécessaire d'utiliser trop de classes ou de sélecteurs d'identifiants. En effet, vous pouvez spécifier des sélecteurs dans les sélecteurs. (Ou mieux dit, sélecteur de contexte - par traducteur)
Par exemple:
#top { couleur d'arrière-plan : #ccc ; remplissage : 1em }
#top h1 { couleur : #ff0 }
#top p { couleur : rouge ; poids de la police : gras ;
Cela élimine les sélecteurs de classe ou d'identifiant inutiles s'ils sont appliqués au HTML comme ceci :
<div id="top">
<h1>Curry au chocolat</h1> <p>C'est ma recette pour faire du curry purement avec du chocolat</p> <p>Mmm mm mmmmm</p>
</div>
En effet, en utilisant des sélecteurs anglais séparés par des espaces demi-largeur, nous spécifions que h1 dans l'ID ID a la couleur "#ff0", tandis que p est rouge et gras.
Cela peut aussi être un peu compliqué (puisqu'il peut y avoir plus de deux niveaux, comme à l'intérieur à l'intérieur à l'intérieur à l'intérieur à l'intérieur, etc.). Vous devez vous entraîner davantage.
L'utilisation de l'imbrication peut rendre votre code CSS plus clair et personnaliser le CSS pour les éléments que vous spécifiez.