CSS

Der Inhalt ist erst nach dem Einloggen sichtbar

Themen:


Introduction ⇑
a ⇑
animation_keyframes ⇑
background ⇑
blank ⇑
border-radius ⇑
border ⇑
box-sizing ⇑
calc ⇑
child ⇑
clear ⇑
clip-path ⇑
content ⇑
cursor ⇑
display ⇑
div ⇑
filter ⇑
flexbox ⇑
float ⇑
font ⇑
form ⇑
grid ⇑
hover ⇑
hyphens ⇑
img ⇑
important ⇑
is ⇑
li ⇑
margin ⇑
menue_hover_horizontal ⇑
menue_hover_vertical ⇑
not ⇑
of-type ⇑
opacity ⇑
optional ⇑
outline ⇑
overflow ⇑
padding ⇑
position ⇑
responsive ⇑
selection ⇑
selektoren ⇑
span ⇑
target ⇑
transform ⇑
transition ⇑
var ⇑
viewport ⇑
where ⇑
z-index ⇑
zoom ⇑

Anzahl an Themen: 51

Aktuell geöffnete Datei: 'of-type'

Zum Wechseln des Themas einfach ein neues Thema eingeben

CSS_of-type

of-type

Mit of-type kann man auf Elemente, Klassen, Ids uvm. in Abhängigkeit ihres Vorkommens im body gezielt zugreifen. Wie bei childs nutzt man zur Eingrenzung der Selektoren die parents (umschließenden Elemente). Parents bezeichnet man in HTML alle Elemente, die von einem umschließdenden Element umgeben sind. Um types einzugrenzen oder zu begrenzen, kann man als Selektoren die parents mit angeben. Die Ansprache via of-type ist nur via interner und externer CSS möglich, da es sich hierbei um Pseudoklassen handelt. Of-type sucht gezielt nach Elementen, Klassen, IDs uvm., wobei die Sibling Elemente ignoriert werden.

first-of-type

span:first-of-type = Wählt den 1. span (aber auch nachfolgend die jeweils Ersten), der sich in einem umschließenden Element befindet
Das umschließende Element kann auch angegeben werden zur Eingrenzung. i.d.R. div oder font
Bei first-of-type spielt die Reihenfolge der Elemente keine Rolle. Der erste Typ, wie im Selektor beschrieben wird angesprochen, egal welche Elemente davor und dahinter stehen.

span:first-of-type

div Start

Absatz 1

Unterstrichen 1
span 1

Absatz 2

span 2
span 3

Absatz 3

span 4
div Ende

last-of-type

span:last-of-type = Wählt den letzten span (aber auch nachfolgend die jeweils Letzten), der sich in einem umschließenden Element befindet
Das umschließende Element kann auch angegeben werden zur Eingrenzung. i.d.R. div oder font
Bei last-of-type spielt die Reihenfolge der Elemente keine Rolle. Der letzte Typ, wie im Selektor beschrieben wird angesprochen, egal welche Elemente davor und dahinter stehen.

span:last-of-type

div Start

Absatz 1

Unterstrichen 1
span 1

Absatz 2

span 2

Absatz 3

Absatz 4

Unterstrichen 2
div Ende

nth-of-type

span:nth-of-type(1) > wählt das 1. span-Element eines parents.
span:nth-of-type(2) > wählt das 2. span-Element eines parents.
span:nth-of-type(even) > wählt alle geraden span-Elemente eines parents. (vgl.: span:nth-of-tyoe(2n))
span:nth-of-type(odd) > wählt alle ungeraden span-Elemente eines parents. (vgl.: span:nth-of-type(2n+1))

span:nth-of-type = Wählt die spans entsprechend des Selektors (aber auch nachfolgend die Jeweiligen), die sich in einem umschließenden Element befindet
Das umschließende Element kann auch angegeben werden zur Eingrenzung. i.d.R. div oder font
Bei nth-of-type spielt die Reihenfolge der Elemente keine Rolle. Der Selektor entscheidet, egal welche Elemente davor, dahinter oder dazwischen stehen.

span:nth-of-type(even)
p:nth-of-type(odd)

div Start

Absatz 1

Unterstrichen 1
span 1

Absatz 2

span 2
span 3

Absatz 3

span 4

Absatz 4

Absatz 5

span 5
Unterstrichen 2
span 6
div Ende

Mit dem Multiselektor alle Elemente im Welchsel ansprechen

*:nth-of-type(even)
*:nth-of-type(odd)

div Start

Absatz 1

Unterstrichen 1
span 1

Absatz 2

span 2
span 3

Absatz 3

span 4
span 5

Absatz 4

span 6

Absatz 5

span 7
Unterstrichen 2
span 8
div Ende

span:nth-of-type(3n+2)
(Auswahl der Elemente: 2,5,8,11)

div Start

Absatz 1

Unterstrichen 1
span 1

Absatz 2

span 2
span 3

Absatz 3

span 4

Absatz 4

Absatz 5

span 5
Unterstrichen 2

Absatz 6

Unterstrichen 3
span 6

Absatz 7

span 7
span 8

Absatz 8

span 9

Absatz 9

Absatz 10

span 10
Unterstrichen 4
span 11
div Ende

Typen ignorieren und Elemente im Wechsel ansprechen ist nicht möglich

only-of-type

p:only-of-type

div Start

Absatz 1

Absatz 2

div Ende

div Start

Absatz 1

unterstrichen 1
div Ende