Waarom wij blij worden van de :has() selector (en jij ook)

Soms kom je een ontwikkeling tegen in webdesign waar je even voor gaat zitten. In het Joomla Magazine van december 2025 verscheen een interessant stuk over de CSS :has() selector. Dat klinkt misschien als saaie kost voor op een verjaardagsfeestje, maar voor jouw website is het goed nieuws.

Bij Welldotcom houden we de ontwikkelingen nauwlettend in de gaten. Niet omdat we graag met vaktermen strooien, maar omdat we jouw site daarmee sneller, slimmer en mooier maken.

Wat is die selector precies?

Zonder al te technisch te worden: in de code van een website (CSS) kon je voorheen alleen 'naar beneden' kijken. Je kon zeggen: als dit blokje rood is, moet de tekst daarin wit zijn. Maar je kon niet 'naar boven' kijken. Je kon niet zeggen: als dit blokje een plaatje bevat, moet het blokje zelf een rand krijgen.

Met de :has() selector kan dat wel. We kunnen nu de opmaak van een element aanpassen op basis van wat erin zit. Het is eigenlijk een manier om voorwaardelijke opmaak toe te passen zonder dat we daar zware scripts voor hoeven te schrijven. Daar maken wij dus geen punt van, want schonere code betekent een snellere website.

De magie in combinatie met YOOtheme Pro

Wij zijn fan van YOOtheme Pro en dat is niet voor niets. Door onze expertise met dit systeem kunnen we deze nieuwe CSS-trucjes direct toepassen in dynamische layouts.

Stel je voor: je hebt een nieuwsoverzicht op je site. Sommige nieuwsitems hebben een specifieke tag, zoals 'Urgent' of 'Nieuw', en andere niet. Dankzij :has() kunnen we in YOOtheme instellen dat de hele kaart van het nieuwsitem een opvallende kleur krijgt, puur omdat die ene tag in het bericht aanwezig is.

Voor de liefhebbers, in de code ziet dat er ongeveer zo uit:

/* Selecteer het nieuwsblok (.el-item) */
/* ...maar ALLEEN als deze de tag 'urgent' bevat */

.el-item:has(.tag-urgent) {
  border: 2px solid red;
  background-color: #ffe5e5;
}

Vroeger moesten we daarvoor ingewikkelde omwegen bouwen of extra plugins gebruiken. Nu is het een kwestie van drie regels code toevoegen. Dat scheelt tijd en maakt het onderhoud van je site een stuk eenvoudiger.

Waarom jij hier iets aan hebt

Je vraagt je misschien af: leuk voor jullie, maar wat heb ik eraan? Het antwoord is simpel: flexibiliteit en snelheid. Doordat wij deze technieken beheersen, kunnen we specifieke designwensen realiseren die voorheen te kostbaar of te complex waren.

We kunnen je website interactiever maken en beter laten reageren op de content die jij plaatst. Jij vult de inhoud, en de website past zich automatisch aan om die inhoud perfect te presenteren.

Tot in de puntjes geregeld

Techniek staat nooit stil. Wat gisteren onmogelijk leek, is vandaag de standaard. Wij zorgen ervoor dat we die standaarden direct inzetten voor onze klanten. Zo blijft jouw Joomla website modern, veilig en razendsnel.

Heb je specifieke wensen voor je design of wil je eens sparren over wat er mogelijk is met YOOtheme Pro? Neem contact met ons op. Dan zetten we samen de puntjes op de i.