CSS-selectors zoals :is(), :not() en :has() zijn krachtige tools om specifieke elementen te selecteren. In deze blogpost laat Polypane zien hoe je deze selectors kunt combineren en onderzoeken ze het verschil tussen :has(:not()) en :not(:has()) en hoe deze selectors elementen kunnen selecteren op basis van de aanwezigheid of afwezigheid van bepaalde elementen.

<div class="card">
  <p>Text without an image.</p>
</div>

<div class="card">
  <img src="image.jpg" alt="An image">
  <p>Text with an image.</p>
</div>

Dit betekent: Selecteer elk .card element dat een kind bevat dat geen img is.

In dit geval:

• De eerste .card heeft een <p> als kind (geen img), dus deze wordt geselecteerd.
• De tweede .card heeft een <p> als kind en een img element, maar het heeft nog steeds een niet-img kind (de <p>), dus deze wordt ook geselecteerd.

Conclusie: Beide .card elementen worden geselecteerd, omdat ze allebei een niet-img kind bevatten.

Dit betekent: Selecteer elk .card element dat geen img bevat.

In dit geval:

• De eerste .card heeft geen img, dus deze wordt geselecteerd.
• De tweede .card bevat wel een img, dus deze wordt niet geselecteerd.

Conclusie: Alleen de eerste .card wordt geselecteerd, omdat dit de enige is zonder een img element.

Het gebruiken van :has(:not()) en :not(:has()) heeft meerdere voordelen:

• Gerichte selectie zonder extra classes: Je kunt elementen selecteren op basis van hun inhoud zonder hiervoor extra classes toe te voegen.
• Minder afhankelijkheid van JavaScript: Stijlen kunnen dynamisch worden toegepast zonder dat er extra JavaScript voor nodig is.
• Flexibeler dynamische content kunnen stijlen: CSS past zich automatisch aan wanneer de inhoud verandert zonder dat je de structuur hoeft aan te passen.

Na het lezen en het analyseren van deze blogpost heb ik het volgende hieruit geleerd:

• Hoe :has(), :not(), en combinaties ervan werken.
• Hoe CSS selectors impliciete universele selectors (*) kunnen bevatten..
• Hoe je CSS selectors kunt gebruiken om dynamische content beter te stijlen.

• De manier waarop :has() en :not() samenwerken om selecties te verfijnen.
• Hoe CSS zonder extra klassen kan bepalen welke elementen zichtbaar zijn.
• Hoe deze technieken helpen om minder afhankelijk te zijn van JavaScript.

• Dit inzicht helpt me bij het schrijven van complexe en efficiente CSS.
• Het helpt me om selectors strategischer toe te passen.
• Het vergroot mijn begrip van CSS en selectors, wat nuttig is bij het werken met complexe UI-componenten.