InMy.Live

Quelque chose sur lequel je trébuchais quand j’ai commencé à apprendre :has() était la combinaison avec :not().

Permettez-moi de vous montrer ce que je me suis trompé en utilisant un exemple. Disons que nous avons deux cartes, chacune avec un titre et du texte. L’un d’eux contient également une image.

<div class="card">
  <h2>Card with image</h2>
  <img src="https://assets.codepen.io/144736/skateboard.jpg" alt="" />
  <p>text</p>
</div>

<div class="card">
  <h2>Card without image</h2>
  <p>text</p>
</div>

.democard.card { bordure : 4px solide ; max-largeur : 20 rem ; marge inférieure : 2rem ; affichage : flexible ; flex-direction : colonne ; largeur : 100 % ; } .democard img { largeur max : 100 % ; ordre : 0 ; bordure : 0 ; } .democard h2 { commande : 1 ; marge supérieure : 1rem ; rembourrage : 0 1rem ; } .democard p { commande : 2 ; rembourrage : 0 1rem 1rem ; } .democard2.card:has(:not(img)) { border-style : pointillé ; } .democard2.card:has(:not(img)) h2 { margin-top : 0 ; } .democard3.card:not(:has(img)) { border-style : pointillé ; } .democard3.card:not(:has(img)) h2 { margin-top : 0 ; } .democols { display : flex ; flex-wrap : enveloppe ; écart : 1rem ; }

Nous voulons maintenant ajouter un style supplémentaire aux cartes sans image. Si une carte ne contient pas d’image, nous voulons supprimer la marge sur l’en-tête et changer le style de bordure.

.card:has(:not(img)) {
  border-style: dotted;
}

.card:has(:not(img)) h2 {
  margin-top: 0;
}

Les styles s’appliquent aux deux cartes, qu’une image soit présente ou non. C’est parce que .card:has(:not(img)) signifie “choisir un .card qui a un élément qui n’est pas une image ». Cela signifie que le sélecteur ne s’appliquerait que si la carte ne contenait que des images.

<div class="card">
  <img src="https://assets.codepen.io/144736/skateboard.jpg" alt="" />
</div>

Si nous changeons :has() et :not() nous demandons au navigateur de faire quelque chose de complètement différent. .card:not(:has(img)) signifie “choisir un .card n’a pas (n’a pas) d’image », et c’est exactement ce que nous voulons dans ce cas.

.card:not(:has(img)) {
  border-style: dotted;
}

.card:not(:has(img)) h2 {
  margin-top: 0;
}

Mon blog ne prend pas encore en charge les commentaires, mais vous pouvez répondre via blog@matuzo.at.