28. Dezember 2016

    Alternierende Hintergrundfarbe mit CSS

    Mit "Even and odd rules" einfach Tabellen optisch aufwerten geht aber auch für alle Elemente innerhalb eines Kontainer wir z.B. ein DIV

    Einfach an den Parent Element die Pseudoklassen  :nth-child(1)  -  für das erste element (1) für das zweite (2) usw. 

     
<p;><strong;&gtBeispiel 01 <br/;>
Nur <span>-Tags werden gezählt <em> wird ignoriert</strong;></p;>

<div class="first";>
      <span;><strong;><span></strong;> Nr. 01</span;>
      <span;><strong;><span></strong;> Nr. 02</span;>
      <span;><strong;><span></strong;> Nr. 03</span;>
      <span;><strong;><span></strong;> Nr. 04</span;>
      <span;><strong;><span></strong;> Nr. 05</span;>
      <span;><strong;><span></strong;> Nr. 06</span;>
      <span;><strong;><span></strong;> Nr. 07</span;>
</div;>

<p;><strong;&gtBeispiel 02<br/;>
 Nur <span>-Tags werden gezählt <em> wird ignoriert</strong;><br;>
<strong;><em>-Tag wurde umpositioniert</strong;></p;>
<div class="second";>
      <span;><strong;><span></strong;> Nr. 01</span;>
      <span;><strong;><span></strong;> Nr. 02</span;>
      <em;><strong;><em></strong;> Nr. 03</em;>
      <span;><strong;><span></strong;> Nr. 04</span;>
      <span;><strong;><span></strong;> Nr. 05</span;>
      <span;><strong;><span></strong;> Nr. 06</span;>
      <span;><strong;><span></strong;> Nr. 07</span;>
</div;>


<p;><strong;&gtBeispiel 03<br/;>
alle Elemente <span> und <Em> werden gezählt</strong;></p;>
 
<div class="second";>
      <span;><strong;><span></strong;> Nr. 01</span;>
      <span;><strong;><span></strong;> Nr. 02</span;>
      <span;><strong;><span></strong;> Nr. 032</span;>
      <span;><strong;><span></strong;> Nr. 04</span;>
      <span;><strong;><span></strong;> Nr. 05</span;>
      <em;><strong;><em></strong;> Nr. 06</em;>
      <span;><strong;><span></strong;> Nr. 07</span;>
</div;>

<style;>
html {
  font-family: sans-serif;
}

span, div em {
  padding: 10px;
  border: 1px solid orange;
  border-radius:10px;
  display: inline-block;
  margin-bottom: 3px;
  font-size:12px;
}
em {
  color:orange;
}
    
.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: orange;
}

.first span:nth-child(2n+1)::before,
.second span:nth-child(2n+1)::before,
.third span:nth-of-type(2n+1)::before {
   content: "orange "; }

</style;>

    Beispiel 01
    Nur <span>-Tags werden gezählt

    <span> Nr. 01 <span> Nr. 02 <span> Nr. 03 <span> Nr. 04 <span> Nr. 05 <span> Nr. 06 <span> Nr. 07

    Beispiel 02
    Nur <span>-Tags werden gezählt <em> wird ignoriert
    <em>-Tag wurde umpositioniert

    <span> Nr. 01 <span> Nr. 02 <em> Nr. 03 <span> Nr. 04 <span> Nr. 05 <span> Nr. 06 <span> Nr. 07

    Beispiel 03
    Alle Elemente <span> und <Em> werden gezählt

    <span> Nr. 01 <span> Nr. 02 <span> Nr. 032 <span> Nr. 04 <span> Nr. 05 <em> Nr. 06 <span> Nr. 07

    Tags: css