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

Marc Borkowski
Autor: Marc Borkowski

Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Rostock. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bilde mich aktuell im grafischen Bereich weiter. Meine Zukunft sehe ich beim gestalterischen Web.

Kontakt

E-Mail: moin@boolie.org | Über mich Seite

Instagram logoYouTube Logo

Schreibe einen Kommentar

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

Kommentare anschauen
Kommentare (0)