CSS - Multiple Selectors
Zowel HTML-elementen als CSS-code kan met meerdere selectors tegelijkertijd overweg, waarbij die selectors op diverse manieren gecombineerd kunnen worden.
Descent selector (spatie-scheidingsteken)
Gebruik een spatie tussen de namen van selectors, om deze als descent selectors toe te passen [1]. Dat wil zeggen, selectors die binnen elkaar zijn genest. Dit is het broertje van de child selector, maar heeft ook betrekking op elementen die niet rechtstreeks met elkaar verwant zijn, maar waar eventueel nog meer elementen tussen zitten. Voorbeeld van de betreffende css-code:
.EersteKlasse .TweedeKlasse { /* Doe iets */ }
Dit geldt voor combinaties van klasse-selectors, id-selectors en type-selectors.
JSFiddle-voorbeeld
Begin - Geen klasse <div class="EersteKlasse"> Div-sectie "EersteKlasse" <p class="TweedeKlasse"> Div-sectie "EersteKlasse" → P-sectie "TweedeKlasse" </p> Div-sectie <p class="DerdeKlasse"> Div-sectie "EersteKlasse" → P-sectie "DerdeKlase" </p> Div-sectie </div> Eind - Geen klasse
met als CSS-code:
.EersteKlasse { background-color: #999; } .TweedeKlasse { background-color: #aaa; } .EersteKlasse .DerdeKlasse { background-color: #ccc; } .EersteKlasse.DerdeKlase { /* en-en-selector. Werkt niet, als het goed is */ background-color: #ccc; }
Zie deze fiddle voor het resultaat.
Multiple selectors
Om elementen te stylen die voldoen aan een logische EN-combinatie van selectors, gebruik selectors zonder spatie:
.EersteKlasse.TweedeKlasse.DerdeKlasse /* Combinatie van meerdere klasses */ { /* Doe iets */ }
li.leaf /* Combinatie van klasse & type */ { /* CSS-code om li-elementen van klasse 'leaf' aan te passen */ }
Dit geldt voor combinaties van klasse-selectors, id-selectors en type-selectors.
Child selector
Een child selector selecteert een element dat een kind is van een ander element. Oftewel, een direct descendant.
Voorbeeld. css-code:
td > b{ background-color: #00ff00; }
Bijbehorende html-code:
<table> <tbody> </tr> <td> Cel 1,1 </td> <td> <b> Cel 1,2 </b> </td> </tr> </tbody> </table>
Adjacent selector
Met de adjacent sibling selector pas je styling toe op een element dat ná een bepaald element volgt, maar dat geen descendant is. Bv:
h1 + p { }
In dit geval krijgt een h1-element en een direct daaropvolgend p-element, vergelijkbare vormgeving. Lijkt een beetje op stijlen in Writer of Word.
Indien er elementen tussen zitten, kun je ze allemaal benoemen. Bv.:
Begin - Geen klasse <div class="EersteKlasse"> Div-sectie "EersteKlasse" <p class="TweedeKlasse"> Div-sectie "EersteKlasse" → P-sectie "TweedeKlasse" </p> Div-sectie <p class="DerdeKlasse"> Div-sectie "EersteKlasse" → P-sectie "DerdeKlasse" </p> <p class="VierdeKlasse"> Div-sectie "EersteKlasse" → P-sectie "VierdeKlasse" </p> Div-sectie </div> Eind - Geen klasse
.TweedeKlasse + .DerdeKlasse + .VierdeKlasse { background-color: #808080; }
Sequential selector (~)
Selector1 ~ Selector2
Selecteer alle Selectors2, die ná Selector1 komen
Voorbeeld: Opmaak primary links aanpassen
In Drupal wil ik de opmaak van de primary links aanpassen. Daarvoor wil ik oa. de opmaak van het li-element aanpassen. Het probleem is, dat als ik een regel gebruik zoals
li{ background-color: #ff0000; }
dat dan alle li-elementen op de site aangepast worden. Ook een meer gerichte regel zoals
li.leaf{ background-color: #ff0000; }
werkt niet, omdat de klasse leaf toevallig voor alle menu's gebruikt wordt. Op li-niveau kan ik de elementen van de primary links niet nader onderscheiden.
Echter, als ik een iets groter gedeelte van de code bekijk, is er wel degelijk een unieke manier om deze li-items te benaderen:
<div id="block-menu-primary-links" class="block block-menu first last region-odd odd region-count-1 count-3"> <div class="content"> <ul class="menu"> <li class="leaf first"> <li class="leaf"> <li class="leaf last"> </ul> </div> </div>
Onder andere het pad
#block-menu-primary-links > .content > .menu > .leaf
is uniek.
En het werkt:
#block-menu-primary-links .content .menu .leaf{ background-color: #ff0000; }
Sterker nog: De tussenliggende selectors hoeven niet genoemd te worden. Dit werkt dus ook:
#block-menu-primary-links .leaf{ background-color: #ff0000; }
Zo'n cascade van selectors is ook te combineren met de naam van een element. Dat is cruciaal, want niet elk element is geassociëerd met een klasse of id:
#block-menu-primary-links li.leaf{ background-color: #ff0000; }
En het kan nog iets precieser: Deze regel heeft betrekking op alle ul-items die 'ergens' onder de betreffende id voorkomen (zelfde resultaat):
#block-menu-primary-links ul{ background-color: #ff0000; }
Bestanden & media
- https://jsfiddle.net/Strompf/zncgd9qa - jsfiddle: Verschillende selectoren in actie