Over >, + en ~ in Style Sheets
Sommige stylesheets bevatten tussen de gebruikelijke selectors een groter-dan-teken of een plus-teken. Op het eerste gezicht is dat raar, maar het heeft wel degelijk bedoeling en betekenis.
Over de > in Style Sheets
Dit wordt aangeduid met de term Child Selector. Er is een match als een HTML-element een 'kind' is van een ander element.
Zo zijn alle elementen in een HTML-document de kinderen van het element <html>.
Een child selector bestaat uit twee selectors met daartussen het groter-dan teken >.
De code:
body > p { line-height: 1.3em }
stelt de regelafstand van alle paragrafen die zich binnen de <body> bevinden, in op 1.3 em.
Deze is wat ingewikkelder. De code:
div ol > li p
matcht een <p> die is gedefinieerd binnen een list-item <li>, die deel uitmaakt van een geordende
lijst <ol>, binnen een <div>.
Over de + in Style Sheets
Met een plus-teken tussen twee selectors geef je aan dat de selector die volgt na de plus, de eigenschappen krijgt die
in de style worden genoemd. Noodzakelijk is dat de selector ná de plus direct volgt op de selector net vóór
de plus. De code hieronder maakt dat de tekst in een paragraaf-tag die direct na een paragraaf-tag komt, een donkerblauwe kleur
krijgt.
p + p { color:navy; }
De code:
h1 + h2 { font-weight:bold }
zorgt er voor dat een <h2>-tag die direct volgt na een <h1>-tag, in vette letters op het scherm
wordt gezet.
Dit kan ook met klassen. De code:
h1.abcd + h2 { font-weight:bold }
zorgt er voor dat een <h2>-tag die direct volgt na een <h1>-tag, in vette letters op het scherm
wordt gezet, mits de <h1>-tag de klasse abcd heeft.
De officiële benaming voor deze techniek is: 'Adjacent sibling selectors'. Adjacent betekent zoveel als "naastgelegen", sibling betekent zoveel als "broer of zus".
Dit werkt alleen als de twee elementen allebei de zelfde 'parent' (ouder) hebben. In het eenvoudigste geval stammen ze direct af van document (wat vaak het geval is).
Over de ~ in Style Sheets
Met een tilde tussen twee selectors geef je aan dat de selector die volgt na de tilde, de eigenschappen krijgt die
in de style worden genoemd. De selector ná de tilde moet na de selector vóór de tilde komen, het
maakt niet uit waar. De code hieronder maakt dat de tekst in een paragraaf-tag die 'ergens' na een (de eerste!) paragraaf-tag
komt, een donkerblauwe kleur krijgt.
p ~ p { color:navy; }
De code:
h1 ~ h2 { font-weight:bold }
zorgt er voor dat een <h2>-tag die volgt na een <h1>-tag (in de dit geval de eerste in het document),
in vette letters op het scherm wordt gezet.
Dit kan ook met klassen. De code:
h1.abcd ~ h2 { font-weight:bold }
zorgt er voor dat een <h2>-tag die volgt na een <h1>-tag, in vette letters op het scherm wordt gezet,
mits de <h1>-tag de klasse abcd heeft.
De officiële benaming voor deze techniek is: 'General sibling selectors'. general betekent "Algemeen", sibling betekent zoveel als "broer of zus".
Dit werkt alleen als de twee elementen allebei de zelfde 'parent' (ouder) hebben. In het eenvoudigste geval stammen ze direct af van document (wat vaak het geval is).
Alles samengevat
- ul li { }. Kijkt naar binnen. Het selecteert alle
li-elementen binnen elkeulin het document, onafhankelijk van waar ze staan.
• Selecteert afstammelingen. - ul > li { }. Kijkt naar binnen. Het selecteert alleen
li-elementen binnen elkeulin het document, die direct van eenulafstammen.
• Selecteert kinderen. - ul + ul { }. Kijkt naar buiten. Selecteert de
uldie direct volgt op eenul.
• Selecteert opeenvolgende kinderen met de zelfde ouders. - ul ~ ul { }. Kijkt naar buiten. Selecteert de
uldie volgt op eenul.
• Selecteert kinderen met de zelfde ouders.
Tenslotte:
Op deze bladzijde zijn spaties gezet, voor en na de >, de + en de ~. Dat is goed voor de leesbaarheid,
maar ze zijn niet nodig en mogen dus worden weggelaten.
Gerelateerd artikel: Over * en [] in Style Sheets.
