CSS - Multiple Selectors
Zowel HTML-elementen als CSS-code kan met meerdere selectors tegelijkertijd overweg, waarbij die selectors op diverse manieren gecombineerd kunnen worden.
Selector EN/EN html-element
li.leaf /* Geen spatie! */
{
/* CSS-code om li-elementen van klasse 'leaf' aan te passen */
}
Descent selector (spatie-scheidingsteken)
Gebruik een spatie tussen de namen van selectors, om deze als descent selectors toe te passen [1]. 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 zowel voor meerdere klasses als combinaties van klasses en ID's en vermoedelijk met html-elementen.
Multiple class selector
Logische EN-operator:
.EersteKlasse.TweedeKlasse.DerdeKlasse
{
/* Doe iets */
}
Dit geldt zowel voor meerdere klasses als combinaties van klasses en ID's, en vermoedelijk ook voor html-elementen.
Child selector
Een child selector selecteert een element dat een kind is van een ander element.
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 sibling selector
Met de adjacent sibling selector pas je styling toe op elementen die in een document achter elkaar voorkomen. Voorbeeld van de betreffende css-code:
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.
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;
}