:has() permet de styler un parent selon ses enfants, un frère selon son autre frère, et un formulaire selon son propre état de validation. Selon caniuse, 95,91 pour cent des navigateurs le gèrent aujourd'hui, plus que certains CSS que vous avez appris des années plus tôt. Voici sept recettes qui exigeaient du JavaScript avant.
1. Mettez en surbrillance la carte qui contient une entrée invalide
.card:has(input:user-invalid) {
outline: 2px solid var(--tomato);
}2. Stylisez chaque ligne de case à cocher de manière cohérente à partir de la case elle-même :
li:has(> input:checked) {
text-decoration: line-through;
}3. Un en-tête qui laisse de l'espace pour la barre latérale, uniquement lorsque la barre latérale est présente :
body:has(.sidebar) .header {
padding-left: 18rem;
}4. Les figures sans légende n’ont pas d’ombre portée. Leurs cousins le gardent :
figure:not(:has(figcaption)) img { box-shadow: none; }5. Colonnes de grille qui s'adaptent à ce qui a été déposé dans la liste. Très cool pour le contenu CMS :
.grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }6. Ouvrez le style d'état sans bascule JS, en utilisant l'attribut popover :
body:has(#search[open]) { overflow: hidden; }7. Le texte de l'article avec au moins un bloc de code obtient une mesure plus large :
article:has(pre) { max-width: 72ch; }La suppression d'un script DOM est un refactor plus agréable que la plupart des refactors.
Firefox le prend en charge depuis la v121, donc l'ancienne liste de rattrapage des excuses du navigateur est enfin vide. Supprimez la balise de script et laissez le sélecteur faire le travail. Si vous voulez la version cousine de cette astuce, lisez ensuite les requêtes de conteneur.