<span>/* default black */
</span><span>p {
</span> <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span> <span>color: #444;
</span><span>}
</span>
Cela crée un code CSS identique, réduit l'effort de frappe et peut empêcher les erreurs. Mais:
- jusqu'à ce que la nidification native arrive, vous aurez besoin d'un outil de construction CSS. Vous voudrez peut-être utiliser une option comme SASS, mais cela peut introduire des complications pour certaines équipes de développement.
- La nidification peut causer d'autres problèmes. Il est facile de construire des sélecteurs profondément imbriqués qui deviennent de plus en plus difficiles à lire et à sortir Verbose CSS.
<span>article, section, aside {
</span>
<span>p {
</span> <span>color: #444;
</span> <span>}
</span>
<span>}
</span>
Un seul sélecteur peut contenir n'importe quel nombre de: est () pseudo-classes. Par exemple, le sélecteur complexe suivant applique une couleur de texte vert à tous les éléments , et
qui sont des enfants d'un Voir le stylo
Utilisation du: est sélecteur par SitePoint (@SitePoint)
sur Codepen. <span><span>:is(article, section, aside) p</span> {
</span> <span>color: #444;
</span><span>}
</span>
Le code équivalent sans: est () requis six sélecteurs CSS:
<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span> <span>color: green;
</span><span>}
</span>
Notez que: est () ne peut pas correspondre à :: avant et :: après les pseudo-éléments, donc cet exemple de code échouera:
<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span> <span>color: green;
</span><span>}
</span>
Le CSS: où le sélecteur de pseudo-classe
: où () la syntaxe du sélecteur est identique à: est () et est également prise en charge dans tous les navigateurs modernes (pas IE). Cela entraînera souvent un style identique. Par exemple:
<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span> <span>display: block;
</span> <span>content: '';
</span> <span>width: 1em;
</span> <span>height: 1em;
</span> <span>color: blue;
</span><span>}
</span>
La différence est Spécificité . La spécificité est l'algorithme utilisé pour déterminer quel sélecteur CSS doit remplacer tous les autres. Dans l'exemple suivant, l'article P est plus spécifique que P seul, donc tous les éléments de paragraphe dans un <span><span>:where(article, section, aside) p</span> {
</span> <span>color: #444;
</span><span>}
</span>
Dans le cas de: est (), la spécificité est le sélecteur le plus spécifique trouvé dans ses arguments. Dans le cas de: où (), la spécificité est nulle.
Considérez le CSS suivant:
<span>article p { color: #444; }
</span><span>p { color: #000; }
</span>
Appliquons ce CSS au HTML suivant:
<span>article p {
</span> <span>color: black;
</span><span>}
</span>
<span><span>:is(article, section, aside) p</span> {
</span> <span>color: red;
</span><span>}
</span>
<span><span>:where(article, section, aside) p</span> {
</span> <span>color: blue;
</span><span>}
</span>
Le texte du paragraphe sera coloré en rouge, comme le montre la démo de codep suivante.
les en-têtes à moins que ne soit le premier enfant d'un élément
<span>p {
</span> <span>font-weight: bold;
</span><span>}
</span>
Tenter de définir une marge supérieure personnalisée plus tard dans la feuille de style n'a aucun effet, car l'article: First-enfant a une spécificité plus élevée:
<span>/* default black */
</span><span>p {
</span> <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span> <span>color: #444;
</span><span>}
</span>
Vous pouvez résoudre ce problème en utilisant un sélecteur de spécificité supérieure, mais c'est plus de code et pas nécessairement évident pour les autres développeurs. Vous finirez par oublier pourquoi vous l'avez besoin:
<span>article, section, aside {
</span>
<span>p {
</span> <span>color: #444;
</span> <span>}
</span>
<span>}
</span>
Vous pouvez également résoudre le problème en appliquant! Important à chaque style, mais Veuillez éviter de le faire! Cela rend plus difficile le style et le développement:
<span><span>:is(article, section, aside) p</span> {
</span> <span>color: #444;
</span><span>}
</span>
Un meilleur choix consiste à adopter la spécificité zéro de: où () dans votre réinitialisation CSS:
<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span> <span>color: green;
</span><span>}
</span>
Vous pouvez désormais remplacer tout style de réinitialisation CSS quelle que soit la spécificité; Il n'y a pas besoin de sélecteurs supplémentaires ou! IMPORTANT:
<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span> <span>color: green;
</span><span>}
</span>
Le CSS: a un sélecteur de pseudo-classe
Le sélecteur: a () utilise une syntaxe similaire pour: est () et: où (), mais il cible un élément qui contient un ensemble d'autres. Par exemple, voici le CSS pour ajouter une bordure bleue à deux pixels à n'importe quel lien qui contient une ou plusieurs balises <span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span> <span>display: block;
</span> <span>content: '';
</span> <span>width: 1em;
</span> <span>height: 1em;
</span> <span>color: blue;
</span><span>}
</span>
C'est le développement CSS le plus excitant depuis des décennies! Les développeurs ont enfin un moyen de cibler les éléments parents!
Le «sélecteur parent» insaisissable a été l'une des fonctionnalités CSS les plus demandées, mais elle augmente les complications de performance pour les fournisseurs de navigateurs, et cela a été longtemps à venir. En termes simplistes:
En supposant que les fournisseurs ont résolu les problèmes de performance, l'introduction de: a () permet des possibilités qui auraient été impossibles sans JavaScript dans le passé. Par exemple, vous pouvez définir les styles d'une forme extérieure