CSS3 - Pseudoklassen - Typen

1. Der feine Unterschied

Alle folgenden Pseudoklassen funktionieren vom Prinzip her genau so, wie ihre fast gleichnamigen Pendants aus dem vorherigen Abschnitt. Nur dass man hier noch zusätzlich den Typ des Elements angibt.

2. first-of-type

• 18.0
• 12.x
• 5.1
• 23.0
• 9.0/10.0

Arbeitet genau so wie das gute alte first-child. Nur halt Typen-bezogen.

div.example-first p:first-of-type {
  color: #f00;
}
<div class="example-first">
  <h4>Überschrift</h4>
  <p>Absatz 1</p>
  <h4>Überschrift</h4>
  <p>Absatz 2</p>
</div>

3. last-of-type

• 18.0
• 12.x
• 5.1
• 23.0
• 9.0/10.0

Wie last-child nur ebenfalls Typen-bezogen.

div.example-last p:last-of-type {
  color: #f00;
}
<div class="example-last">
  <h4>Überschrift</h4>
  <p>Absatz 1</p>
  <h4>Überschrift</h4>
  <p>Absatz 2</p>
  <h4>Überschrift</h4>
</div>

4. nth-of-type

• 18.0
• 12.x
• 5.1
• 23.0
• 9.0/10.0

Dazu sage ich jetzt nichts mehr.

div.example-nth p:nth-of-type(2) {
  color: #f00;
}
<div class="example-nth">
  <h4>Überschrift</h4>
  <p>Absatz 1</p>
  <h4>Überschrift</h4>
  <p>Absatz 2</p>
  <h4>Überschrift</h4>
  <p>Absatz 3</p>
</div>

Startposition und Intervalle sind ebenfalls möglich. Probiert es aus.

5. nth-last-of-type

• 18.0
• 12.x
• 5.1
• 23.0
• 9.0/10.0

Dito.

div.example-nth-last h4:nth-last-of-type(2) {
  color: #f00;
}
<div class="example-nth-last">
  <h4>Überschrift 1</h4>
  <p>Absatz 1</p>
  <h4>Überschrift 2</h4>
  <p>Absatz 2</p>
  <h4>Überschrift 3</h4>
  <p>Absatz 3</p>
  <h4>Überschrift 4</h4>
</div>

Startposition und Intervalle bla bla, ... alles wie gehabt.

6. only-of-type

• 18.0
• 12.x
• 5.1
• 23.0
• 9.0/10.0

Könnt ihr euch ja denken.

div.example-only *:only-of-type {
  color: #f00;
}
<div class="example-only">
  <h4>Überschrift 1</h4>
  <p>Absatz 1</p>
  <p>Absatz 2</p>
  <h4>Überschrift 3</h4>
</div>
<div class="example-only">
  <h4>Überschrift 1</h4>
  <p>Absatz 1</p>
</div>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt