CSS Styles definieren

Übersicht von Styleanwendungen auf verschiedene Objekte.  Es wird erklärt wie auf Class , ID , HTML Tag Styles übertragen werden. Des weiteren wird noch das :hover genauer erklärt.

Class – .class

Eine class erstellen: freestyle

.freestyle{font-size:30px;}

<span class="freestyle">Hello World</span>
<span class="freestyle">Hello World</span>

Klassen sind mehrfach auf Objekte anwendbar.

ID – #ID

ID: freestyle

#freestyle{font-size:30px;}

<span id="freestyle">Hello World</span>

Es darf nur ein Element mit der selben ID existieren.

HTML-Tag – TAG

HTML-Tag: h2

h2{font-size:30px;}

<h2>Hello World</h2>

Dieser Style wird auf jedes h2 Element auf der Seite übertragen.

hover – STATE

a{text-decoration:none;}
a:hover{text-decoration:underline;}

<a href="#">dies ist ein Link</a>

dies ist ein Link

:nth-child(an+b)

Mit :nth-child kann auf jedes xte Sub-Element zugegriffen werden, dies bedeutet es kann z.B. jedes 2te Element angesprochen werden.

.freestyle a:nth-child(2n+0) {
  background-color: red;
}

<div class="freestyle">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
</div>

.freestyle a:nth-child(2n+1) {
  background-color: red;
}

<div class="freestyle">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
</div>

:nth-of-type(an+b)

Bei nth-of-type wird nach einem bestimmten Objekt gefiltert, dies bedeutet es muss nicht unbedingt ein direktes Sub-Elment von der Klasse sein.

.freestyle p:nth-of-type(2n+0) {
  color: red;
}

<div class="freestyle">
  <p>P-Tag 1</p>
  <p>P-Tag 2</p>
  <p>P-Tag 3</p>
  <p>P-Tag 4</p>
</div>

CSS Tutorial

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS Klassen kombinieren