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 Portait
Autor: Marc Borkowski

Moin,
mein Name ist Marc Borkowski. Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Wismar. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bin ausgebildeter Mediengestalter. Aktuell entwickle ich mich zu einem Techlead und werde hier meine Erfahrungen mit euch teilen.

Kontakt

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

Instagram logoLinkedIn LogoYouTube Logo

Schreibe einen Kommentar

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

Kommentare (0)
klimabewusste Website