Front End Friday: CSS-selectorprioriteit

  
31 mei 2013

Deze keer in Front End Friday: CSS-selectors. Het kan heel verwarrend zijn als je een container een achtergrondplaatje wilt geven, maar er ‘ergens in de CSS’ iets staat wat dat verhindert. Hoe zit dat toch ook alweer met de prioriteit van CSS-selectors?

Een paar vuistregels:

  1. Hoe specifieker, hoe hoger de prioriteit
  2. Bij gelijkspel wint de selector die het laatst wordt ingelezen
  3. !important wint van iedereen
  4. Gebruik de generiekste selectors

Voorbeeldcode:

<section id="container" class="inner" style="background: red">
<article>
<h1>Een artikel!</h1>
<p>Met wat tekst.</p>
</article>
</section>


<style>
* { background: orange }
section { background: gray }
.inner { background: blue }
.inner { background: purple }
#container { background: yellow }
</style>

Hoe specifieker, hoe hoger de prioriteit
CSS-selectors heb je in verschillende smaken: ID ruled (#myId), class ruled (.myClass), tag ruled (div) en universally ruled (*). Daarnaast kun je gebruik maken van inline style. Alhoewel dat geen selector is, is het wel handig om die hier te vermelden.
Op basis van deze vuistregel zul je al snel zien dat de achtergrond van de section rood zal worden. Inline style is namelijk het specifiekst in de code hierboven. Zou je die weglaten, dan wordt de section geel, want een ID is specifieker dan de rest. Laat je ook die weg, dan wordt de section paars. (Lees door om te zien waarom hij dan niet blauw wordt, maar je hebt vast al een vermoeden.) Zonder ook die klasseselectors wordt de achtergrond grijs, daarna oranje, daarna browser default, wat waarschijnlijk wit is.
De volgorde is ook logisch: inline style zit direct ‘op de bron’, een ID wijst altijd maar één element aan (anders heb je een cursus HTML nodig), een klasse geldt voor een bepaalde groep elementen, een tag is nog generieker en de universele selector pakt alle overgebleven elementen.
Als je selectors combineert (bijvoorbeeld h2#myId.main.title) is wellicht wat lastiger te beredeneren wanneer deze voorgaat boven andere selectors van een DOM-element. Maar eigenlijk is het heel makkelijk. Het maakt niet uit hoeveel class ruled selectors je gebruikt, zodra iemand je voor is met een ID ruled selector, wint hij (of zij natuurlijk). Eén selector van een hogere orde wint de pot al. Dat is handig om te weten als je voorrang wilt boven een CSS-selector uit een framework bijvoorbeeld. Nog een voorbeeld: body #myId gaat boven #myId.

Bij gelijkspel wint de selector die het laatst wordt ingelezen
Je zag het net al: als je meermalen een stijl zet op een element, dan wint de laatste (in dit geval paars). Dat komt misschien wat raar over, maar het is natuurlijk heel handig. Je ‘eigen’ CSS lees je gewoon als laatste in, en daardoor hoef je geen trucs uit te halen om jouw lettertype op een component uit een jQuery-plugin te zetten. Je gebruikt gewoon de klasse of het ID.

!important wint van iedereen
Soms krijg je het niet voorelkaar om een stijl op een specifiek element te zetten, omdat een of ander framework inline styling toepast. Dan kun je jouw CSS toch nog toepassen door het sleutelwoord !important toe te voegen: .myClass { background: pink !important }. Wees hier wel spaarzaam mee, want je loopt het risico dat je ‘selector-inflatie’ aan het inbouwen bent.

Gebruik de generiekste selectors
In het voorbeeld kun je de paragraaf op meerdere manieren aanwijzen:

  • p
  • article p
  • #container > article > p
  • body section#container.inner > article > p

Driemaal raden wat de voorkeur heeft. De eerste, want die is het generiekst. Als je de laatste gebruikt, kun je het element – buiten deze plaats – alleen nog met inline styling of met !important aanpassen.
Wat ook nog kan, is .inner p, als je meerdere paragraphs hebt, maar als de p die je hier bedoelt anders moet zijn dan andere paragraphs. Maar ook alleen dan!

Nog vragen?
Mocht je worstelen met andere vragen over CSS of iets anders op front-endgebied, neem dan contact op met Kevin van Ruitenbeek of mij. Dan nemen we het antwoord op je vraag een volgende keer mee in de Front End Friday.


Werken met en ?
Kijk dan bij onze mogelijkheden voor starters en/of ervaren IT'ers.


Categorieën: Front End Friday

Tags: ,


Reacties (3)

  • Simon Klees schreef:

    @Erik haha, dank je. De titel is inderdaad niet goed, het had moeten heten: “Prioriteit van CSS-selectors”. Er komen nog meer artikelen over CSS.

    @Johan Dat klopt wel, maar in dit voorbeeld is ‘p’ voldoende. Het gaat erom dat je niet onnodig allerlei selectors toevoegt, maar dat je erover nadenkt wat het minimum is dat je nodig hebt. Voor je het weet verzand je in ellenlange selectors. Asides vallen buiten de scope van dit artikel.

    Geplaatst op 03 juni 2013 om 10:03 Permalink

  • Johan Scholten schreef:

    Hmm, ik ben het toch niet helemaal eens met altijd de meest generieke selector te kiezen. Je moet vastleggen wat je wilt, en van die variant moet je je altijd afvragen of een generiekere versie ook zou voldoen.

    P kan voldoen, maar als de opgegeven stijl alleen nuttig is voor binnen een article, en ze in principe best in een aside kunnen worden toegepast, waarom zou je dat niet benoemen?

    En !important moet je eigenlijk altijd proberen te vermijden natuurlijk, ook al heb ik hem ook een keer moeten gebruiken :(

    Geplaatst op 03 juni 2013 om 9:57 Permalink

  • Erik Mulder schreef:

    He Simon,

    Goed verhaal, nu is het me echt duidelijk hoe het werkt! :)

    Groeten van de tafeltennis-commissie ;)

    Erik

    Geplaatst op 31 mei 2013 om 17:18 Permalink