Pseudoelemente
Selektoren, die Pseudoelemente erzeugen, stehen am Ende einer Kette von Selektoren oder sind alleinstehend. Sinnvoll ist, Pseudoelemente an einen Selektor zuhängen, um ihre Wirkung auf diesen Selektor zu beschränken.
::first-line
Mit dem Pseudoelement wird die erste Zeile eines Textes beeinflußt. Eine Zigarette geraucht und tief verinnerlicht: Jetzt bin ungefähr 35 Jahre Werbegestalter, Layouter von mir aus und kann mich nicht erinnern, dass mir sowas jemals untergekommen ist. Gemeint ist tatsächlich nur die erste Zeile unabhägig von der Länge des Absatzes. Beispiele konnte ich lediglich mit Farbänderung, kursiv oder fett feststellen. Mehr scheint nicht zu gehen, denn Blockstile werden nicht unterstützt! Ich gehe zum nächsten Punkt:
::first-letter
Im ersten Glyphen kann eine Initiale erzeugt werden. Beispiel ist unter CSS ➤ Gestaltungsarbeit ➤ Textgestaltung beschrieben. Um dies nicht für jeden Absatz anzuwenden, habe ich für die Demonstration ein Klasse eingesetzt.
::before und ::after
Hier wird etwas vorangestellt oder angehängt. Das wird dann nützlich, wenn damit in Aufzählungen oder Tabellen z.B. Schreibarbeit gespart werden kann. Damit beschäftigt man sich einmal, weil Faulheit der Initiator des Lernens ist.
Und sogleich setze ich das Pseudoelement mit dem Selektoren <q> ein,
weil: wer von Typografie keine Ahnung hat,
kennt auch die typografischen Anführungszeichen nicht!
Der nimmt "genau das"!
Mit der Kodierung content="text/html;charset=iso-8859-1" geht oder ging das noch mit „ und “ .
Aber utf-8: Ach du meine Jüte: U+0132 für „ und U+0147 für “ - hallo? Im schlimmsten Fall, wenn ich mein Gedächtnis auf irgend einem Zettel in irgend einer Schublade vergessen hatte, musste ich das im Quellcode wie bisher notieren. Aber hier ist die Lösung:
| 21 22 23 |
q { color: #9126ff; }
|
| 54 55 56 |
<br />weil: <q>wer von Typografie keine Ahnung hat,
|
Weitere Beispiele für den Einsatz von Pseudoelementen für GeschwisterElemente.
:first-of-type und :last-of-type
Die Pseudoklassen sprechen Kind-Elemente an. Das 1. Element ein <span> im Absatz erhält einen Unterstrich, weil es nicht das letzte ist. span:not(:last-of-type) { border-bottom: 1px solid #757; }
Der erste Buchstabe wird fett dargestellt span:first-of-type::first-letter{font-weight: bold;} und könnte auch zur Initiale werden.
Das gleiche gilt für das nächste <span>. Es ist aber nicht das erste Element, somit der erste Buchstabe nicht verändert wird.
Erst für das letzte <span> Element bleibt der Unterstrich weg. Naja, na gut!
:nth-child, :last-child Pseudoklassen
| Obst | |||
|---|---|---|---|
| Apfel | Pflaume | Birne | Pfirsich |
| Kirsche | Orange | Erdbeer | Johannisbere |
| Gemüse | |||
| Gurke | Tomate | Kolrabi | Blumenkohl |
| Paprika | Sellerie | Zwiebel | Grünkohl |
Es werden die KindElemente innerhalb des Vorkommens in ihrem ElternElement angesprochen. Tabellen aber auch Listen bilden die bevorzugte Anwendungsmöglichkeit. Für Formulare wird das schon schwierig.
Ich will hier für Tabellenzellen das Rad nicht neu erfinden. Die Demonstration bezieht sich auf die Zellrahmen und deren Aussehen durch gezieltes anpassen. Dafür sind der Tablle die Eigenschaften cellspacing und cellpadding auf Null gesetzt. CSS-Styles sollen nun die Rahmengestaltung übernehmen. Für jede Zelle die Eigenschaft: border: 1px solid #88a; zu geben, führt zu doppelter Linie nebeneinander liegender Zellen. Das soll mein Thema sein.
Alle Zellen bekommen die Eigenschaft:
td { padding-right: 4px; padding-left: 4px; border-top: 1px solid #88a; border-left: 1px solid #88a; },
also links und oben eine Linie sowie den inneren linken und rechten Abstand damit sie nicht am Rand anbappen. Anders farbige Linien dienen den folgenden Absichten.
Der 2. Schritt gibt die rechte Linie vor:
td:last-child {border-right: 1px solid #08f;}
Nun der etwas schwierige Teil. Nicht jede Zelle soll einen unteren Strich erhalten, sonst gibt es wieder Doppellinien.
tr:nth-child(3n+3) td:nth-child(-n +4) { border-bottom: 1px solid #f00; } Mit tr:nth-child(3n+3) wird jede 3. Zeile ab der 3. gezählt und bestimmt. Obst und Gemüse sind auch in einer Zeile. Die Spaltenanzahl: td:nth-child(-n +4) beträgt vier. Bei Änderung von Spalten und Zeilen ist das natürlich anzupassen. Man kann sich aber auch mit Selektoren aushelfen [selektor]. Jedem letzten Element in Zeile oder Spalte mit [sorte=ende] { border-bottom: 1px solid #08a; } angesprochen werden z.B. <tr sorte="ende">...</tr>.
::selection
Es ist möglich, die Vorder- und Hintergrundfarbe individuell zu beeinflussen, wenn ein Text markiert wird.
Ich enthalte mich da mal ganz dezent jeglicher Bewertung. Was sich manche Leute so ausdenken.