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

De filddle hiernaast ik actie

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

Tjakka: Een CSS-regel die alleen wordt toegepast op de klasse die hoort bij de li-items van de primary links

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

Zie ook

Bronnen

https://css-tricks.com/multiple-class-id-selectors/