Naar de hoofdinhoud

Hoe vind je een CSS Selector?

Nick van Plateringen-Paul avatar
Geschreven door Nick van Plateringen-Paul
Meer dan 2 weken geleden bijgewerkt

Sommige Plus+ add ons vragen om een CSS selector. Dat is simpel gezegd het “adres” van een element op je pagina, zodat de add on precies weet waar hij iets moet plaatsen of aanpassen.

Voorbeeld: je wilt iets in je winkelwagen tonen, dan moet de add on weten welk stuk van de winkelwagen de juiste plek is. Daar gebruik je die selector voor.

Hieronder leg ik je uit hoe je die selector vindt, zonder gedoe.

Wat is een CSS selector eigenlijk?

Een selector is een stukje tekst dat verwijst naar een element op je site, bijvoorbeeld:

  • #winkelwagen
    Dit is een ID, uniek op de pagina.

  • .cart-summary
    Dit is een class, die kan meerdere keren voorkomen.

  • form#gui-form-cart
    Dit is een combinatie, dus specifieker.

  • #gui-form-cart .totals
    Dit betekent: het element met class totals binnen #gui-form-cart.

In Plus+ zie je vaak een veld zoals #gui-form-cart. Dat is dus een ID selector.

Methode 1, snelste manier via Inspecteren (Chrome, Edge)

1) Ga naar de pagina waar je het element ziet

Open dus de exacte pagina waar het moet gebeuren, bijvoorbeeld je winkelwagen, checkout, productpagina, etc.

2) Klik met rechts op het onderdeel dat je bedoelt

Kies Inspecteren.

Je ziet nu de Developer Tools en het element in de HTML is gemarkeerd.

3) Zorg dat je het juiste element hebt

Beweeg met je muis over de regels HTML. In je pagina zie je dan welke blokken oplichten.

Tip: klik in de Developer Tools linksboven op het “pijltje in een vierkantje” (element selecteren) en klik daarna op het onderdeel op je pagina. Dan zit je bijna altijd goed.

4) Kopieer een selector

Rechtsklik op de gemarkeerde regel HTML, kies:

Copy → Copy selector

Plak dit in het Plus+ veld bij “Selector”.

5) Test direct of het goed is

In de Developer Tools ga je naar de tab Console en plak:

document.querySelector('HIER_JE_SELECTOR')

Druk op Enter.

Krijg je iets terug zoals <div ...> dan is hij goed. Krijg je null, dan pakt hij niks en moet je een andere selector kiezen.

Methode 2, netter en stabieler (aanrader)

“Copy selector” is snel, maar kan soms te lang of te gevoelig zijn. Je wilt liever iets dat stabiel blijft als er kleine wijzigingen zijn.

1) Zoek eerst een ID als dat kan

Een ID begint in HTML met id="..." en in CSS met #...

Voorbeeld:

  • HTML: id="gui-form-cart"

  • Selector: #gui-form-cart

Dit is vaak de beste optie.

2) Anders, gebruik een duidelijke class

Een class begint in HTML met class="..." en in CSS met .

Voorbeeld:

  • HTML: class="cart-totals"

  • Selector: .cart-totals

3) Maak hem specifieker als er meerdere dezelfde classes zijn

Als .cart-totals meerdere keren voorkomt, combineer je hem met iets eromheen:

#gui-form-cart .cart-totals

Of:

.cart .cart-totals

Waar gaat het vaak mis?

Je selector is veel te lang

Als je selector eruit ziet als een halve roman met allemaal div > div > div, dan is hij vaak te kwetsbaar.

Beter:

  • #gui-form-cart

  • .cart-summary

  • #checkout .shipping-methods

Minder goed:

  • body > div:nth-child(2) > div > div:nth-child(5) ...

Je pakt een element dat niet uniek is

Als je selector meerdere elementen matcht, weet de add on soms niet welke plek je bedoelt.

Test dit in de Console:

document.querySelectorAll('JOUW_SELECTOR').length

Krijg je 1 terug, top.
Krijg je 2 of meer, maak hem specifieker.

Je zit op de verkeerde pagina

Sommige elementen bestaan alleen in de winkelwagen, of alleen in de checkout. Zoek de selector dus altijd op de pagina waar het echt moet gebeuren.

De class wisselt steeds

Soms zie je classes die automatisch worden gegenereerd. Die veranderen na updates of herladen.

Herkenbaar aan rare namen zoals:

  • css-1x7a9q

  • sc-bdnylx-0

Gebruik die liever niet. Zoek dan een hoger “vast” element, zoals een container met een normale naam of een ID.

Handige voorbeelden die klanten vaak nodig hebben

  • Winkelwagen formulier: #gui-form-cart

  • Een knop: .btn of specifieker .cart-actions .btn

  • Een blok in checkout: #checkout .something

  • Een product element: .product-details of .product-form

Welke jij nodig hebt hangt af van jouw thema en pagina opbouw.

Mini checklist

  1. Ik sta op de juiste pagina.

  2. Rechtsklik op het onderdeel, Inspecteren.

  3. Controleer of ik echt het juiste element heb.

  4. Kopieer selector, of maak een nette korte selector.

  5. Test met document.querySelector(...) of hij iets vindt.

  6. Plak hem in Plus+ en sla op.

Kom je er niet uit?

Stuur ons dan even:

  • de pagina URL waar het moet gebeuren

  • wat je precies wilt plaatsen of aanpassen

  • een screenshot van het element dat je bedoelt (met eventueel de HTML open in Inspecteren)

Dan kunnen we je meestal direct de juiste selector geven.

Was dit een antwoord op uw vraag?