Advanced CSS - Allgemeine Pseudoklassen und -elemente

1. Verwendungsbereich

Allgemeine Pseudoklassen und -elemente können unter Umständen nur in einem bestimmten Kontext eingesetzt werden. Weil es entweder sonst nicht funktioniert, oder überflüssig wie ein Kropf(f) ist. Ich darf das sagen, ihr nicht.

Ein Hinweis

Bei SelfHTML heißt es, dass die folgenden Beispiele nur für Absätze gelten. Oder zumindest werden andere Möglichkeiten nicht erwähnt. Das stimmt so nicht, denn man kann sie auch problemlos auf andere Inhalte anwenden.

2. :first-child (Pseudoklasse)

Bezieht sich auf das erste gleichartige Element innerhalb eines "Containers". Das kann ein HTML-Tag oder auch eine Klassenzuweisung sein. Eine ID-Zuweisung funktioniert auch, ist aber völliger Tinnef, da die ja einzigartig pro Seite sein muss.

li:first-child {font-style:italic;}
div .mark:first-child {text-transform:uppercase;}
...
<ul>
 <li>1. Eintrag</li>
 <li>2. Eintrag</li>
 <li>3. Eintrag</li>
</ul>
<div>
  <h3 class="mark">blubb</h3>
  <p class="mark">bla</p>  
</div>

:last-child

Wird erst mit dem kommenden Standard CSS 3 kommen. Allerdings beherrschen das die modernen Browser bereits mit Ausnahme des Internet Explorers 8.

3. :first-line (Pseudoelement)

Bezieht sich ausschließlich auf Fließtext und darin vorkommenden Inline-Elementen. Dabei wird die erste Zeile gesondert behandelt. Das passiert sowohl bei einem "weichen" Zeilenumbruch, weil der Platz nicht mehr ausreicht, als auch bei einem "harten" mittels <br />.

p:first-line { font-weight:bold; }
...
<p>bla blubb blubber<br /> laber schwall jodelbla</p>  

4. :first-letter (Pseudoelement)

Wie der Name schon sagt, geht es hier um den Anfangsbuchstaben eines Fließtextes.

p:first-letter { 
  font-weight:bold;
  color: #f00;
  font-size: 3em;
  text-transform: uppercase;
  vertical-align: middle;
}
...
<p>bla blubb blubber laber schwall jodelbla</p>  

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