Pseudoklassen
1 Mit Pseudoklassen auf Elemente angesprochen werden Fallunterscheidungen hervorgehoben. CSS unterscheidet:
2 Einsteigen möchte ich bei :nth-child():
:nth-child(an+b)selektiert ab b (Stelle des Vorkommens des Elementes) jedes a-te Element.:nth-child(odd)ist identisch zu:nth-child(2n+1)oder:nth-child(2n-1)(ungerade Platznummer).:nth-child(even)ist identisch zu:nth-child(2n)(gerade Platznummer).:nth-child(b)selektiert nur das b-te Kindelement.:nth-child(n)selektiert alle Kindelemente.- Eintrag nur zum Auffüllen
- Eintrag nur zum Auffüllen
- Eintrag nur zum Auffüllen
3 Jeder gerade Absatz: color: #00007d; und ungerade: color: maroon; soll farblich verschieden erscheinen,
4 wie in folgender Styleangabe notiert:
p:nth-child(2n+1) { color: maroon; }
p:nth-child(2n) { color: color: #000007d ; }
//Jedes 3. Absatz-Element ab dem 4. Vorkommen erhält zusätzlich einen cremefarbenen Hintergrund
p:nth-child(3n+4) { background-color: ##fff5dc; }
//Jedes 3. Listen-Element ab dem 4. Vorkommen erhält zusätzlich einen gelblichen Hintergrund
li:nth-child(3n+4) { background-color: #ffd700; }
5 Wenn das nicht so einfach wäre, dann würde ich mich nicht fragen:
Wieso ist der 1. und damit ungerade Platz blau und nicht maroon?
Wieso folgt auf den 4. Absatz (blau - wäre ja auch richtig) der 5. also dieser auch blau?
Warum wird der 4. Absatz nicht hell unterlegt. Ich werde blass, der nicht!
6 Absätze werden zur Unterscheidung durch einen Strich am rechten Rand hervorgehoben. Der Thementitel „Pseudoklassen“ ist ein <h1>-Element und die Listeneinträge erscheinen mit dem typischen bullet für die erste Schicht. Da <h1> und <li> als Kind von <ul> selber blockerzeugende Elemente sind, ... ist klar - geht nicht, wird nicht innerhalb eines Absatzes notiert.
Frage: Was passiert hier? Antwort: Keine Ahnung!
Lösche ich <h1> wird der 1. Absatz formatiert wie vorgeschrieben. Mit der Notation p:nth-child(Eigenschaft) schließe ich doch alle anderen Elemente von der Pseudoklassen-Eigenschaften für einen Absatz aus. Oder?
7 Dass ich mir aber immer Beispiele ausdenken muss, die dann nicht funktionieren!
Das Einzige was in dem Absatz stimmt, ist die Hintergrundfarbe, weil 3. Element nach dem ersten Vorkommen, dass für den 4. Absatz vorgeschrieben ist. Na wenigsten was. Soll ich aber damit zu frieden sein?
8 Ich mach mal bei: :first-of-type() weiter.
10 Schon allein das von selfhtml.wiki beschriebene Beispiel auf <h2>-Elemente angewendet, das auch auf jedes andere zutrifft, mindert meine Freude am experimentieren. Mit:
//h2:first-of-type { border: 3px solid blue; } nehme ich nicht, sondern
h4:first-of-type { color: red; font-size: 28px; }
// für alle anderen: h4 {
color: #004eb7;
font-size: 18px;
font-family: arial;
line-height: 100%;
position: relative;
margin-top: 0;
margin-bottom: 4px;
margin-left: 24px;
}
Ein vorrangig für Überschriften benutztes <h4>
Wenn dann alle Klarheiten auf mein <h4>-Dasein beseitigt sind,
11 wenden wir uns den Unklarheiten zu!
Warum sollen gleichrangige Elemente in ihrem Erscheinungsbild Unterscheidungsmerkmale tragen? Wees ick nich!
Selbst bei Absätzen fällt mir kein Beispiel ein, den ersten von den anderen abzusetzen.
12 Verweise optisch gestalten
13 Na bitte! a:link, a:visited, a:focus, a:hover, a:active von Anfang an dabei und rufe ihnen gern zu:
die ersten werden auch die letzten sein!
14 ...um einen friedlichen Abschluss zu finden. Obwohl ich hier gern eine blaue Schrift gehabt hätte!
Nun gut - einen muss ich doch noch anhängen: a:not([href]), also ein Verweis, der dann doch keiner ist. Das ist abgefahren und schreibe im Klartext: <a>zum Thema</a>. Boah, wattn datt.
Dazu schreibe ich unter dem Thema:
PHP ► Auto-Verweise ►
Links, die sich selbst aus ihrer Herkunft heraus erstellen. Das ist spannend kann ich nur sagen!