nth-child bezogen auf Klassennamen

CSS

In einer "gemischten" Gruppe von div-Elementen möchte ich jedem zweiten mit einer bestimmten Klasse eine Eigenschaft zuweisen.

Das ist mit Hilfe eines Filters möglich: ":nth-child(an + b of <selector>)"

Das folgende Beispiel gibt jedem zweiten Element mit dem Klassennamen "anderesElement" einen roten Hintergrund,
unabhängig davon, wieviele andere Elemente vorhanden sind:

<style>

   div:nth-child(2n + 0 of .anderesElement) {
      background-color: red;
   }

</style>

<div>
   <div class="einElement">1</div>
   <div class="anderesElement">2</div>
   <div class="anderesElement">3</div>
   <div class="anderesElement">4</div>
   <div class="anderesElement">5</div>
   <div class="anderesElement">6</div>
   <div class="anderesElement">7</div>
</div>

 

Friday, 09. February 2024 - 11:10