CSS Styles definieren

Datum
10.10.2017

Ü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>

P-Tag 1

P-Tag 2

P-Tag 3

P-Tag 4

CSS Tutorial

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS Klassen kombinieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentare anschauen
Boolie Startseite öffnen folge Boolie auf Twitter folge Boolie auf Instagram
Kommentare (0)
sehr gutes Webhosting Manitu
Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Ok mehr Informationen