Kombinatoren
...verketten zwei Selektoren miteinander. Durch diese Verkettung bildet der erste Teilselektor eine Bedingung und der zweite Teilselektor das Ziel.
Zwischen zwei Selektoren kann nur ein Kombinator stehen, jedoch kann an diese Kette ein weiterer Kombinator zusammen mit einem weiteren Teilselektor angehängt werden.
Die Bedeutung von kombinierten Selektoren ähnelt der von Pseudoklassen, ist jedoch allgemeiner.
Der Nachfahrenselektor: „Leerzeichen“ zwischen Elementen
Es wird der Nachfahre (em p) unabhängig von seiner Einfügung
im Elementenbaum (em ins p) beeinflußt. ...
Hier wird deutlich das <em> als Nachfahre von <ins> die Eigenschaft des Unterstriches behält. Es wurde nichts abweichendes notiert.
23
24
|
#contained ins { color: DarkRed; } /* vordefiniert mit Unterstrich */
#contained em { color: green; font-size: 17px; font-family: Times, "times new roman"; } /* vordefiniert kursiv */
|
64
65
66
|
<p>
Es wird der <em>Nachfahre (em <im></im> p)</em> unabhängig von seiner <ins>Einfügung</ins>
im <ins><em>Elementenbaum (em <im></im> ins <im></im> p)</em></ins> beeinflußt. ...
|
Oder? Und wenn doch?
...
Es wird der Nachfahre (ins p) unabhängig von seiner Einfügung
im Elementenbaum (ins em p) beeinflußt. ...
Dass das jetzt ganz schön Frickelei wird, ist klar. Die Konstellation ist geändert. Element ins ist jetzt im Element em und verliehrt seinen Unterstrich, obwohl es im Elementenbaum als Nachfahre gelten sollte. Die CSS-Anweisung hat keine Kind-Deklaration (>), erhält aber deren Wirkung. Das sollte eigentlich Thema des Kindselektoren sein. Sind somit nur direkte Nachfahren gemeint? So lese ich das nicht!
25
|
#contained em ins { text-decoration: none; }
|
75
76
77
|
...
Es wird der <ins>Nachfahre (ins <im></im> p)</ins> unabhängig von seiner <em>Einfügung</em>
im <em><ins>Elementenbaum (ins <im></im> em <im></im> p)</ins></em> beeinflußt. ...
|
Innerhalb einfacher Konstruktionen wird man sicherlich den Überblick behalten.
Soll ein mehrfach verschachtelter Baum im Beispiel erstellt werden
und jetzt gebe ich keine Acht auf die semantische Auszeichnung,
wird die Darstellung SELFHTML: HTML-Elemente für logische Auszeichnung im Text
natürlich chaotisch. So macht das aber auch keiner!
Die Schrift [monospace] kennt die deutschen Anführungszeichen
nicht. Attributbedingte Formate
( wie: cite="Quelle">SELFHTML ) kommt später, gehört nicht hierher!
28
29
30
31
32
33
34
|
#contained var { color: Red; } /* vordefiniert kursiv */
#contained q { color: Maroon; font-style: italic; } /* vordefiniert mit typografischen Anführungszeichen */
#contained span { } /* eigenschaftslos */
#contained samp { } /* vordefiniert: font-family: monospace; */
#contained samp dfn { color: DarkBlue; background-color: White; font-style: normal; }
#contained samp q { color: Purple; }
#contained samp mark{ color: DarkSlateGray; background-color: Azure; }
|
85
86
87
88
89
90
91
92
93
|
<p>
<samp>Innerhalb einfacher <var>Konstruktionen wird man sicherlich den <em>Überblick</em></var> behalten.
Soll ein mehrfach <dfn>verschachtelter Baum</dfn> im <em>Beispiel <ins>erstellt werden <mark>
und jetzt</mark> gebe</ins></em> ich <var>keine Acht auf die <mark>semantische Auszeichnung</mark></var>,
wird die Darstellung <q cite="Quelle">SELFHTML: <dfn>HTML-Elemente für logische Auszeichnung im Text
</dfn></q> natürlich chaotisch. So <ins>macht <span><em>das aber</em></span> auch</ins> keiner!</samp>
Die Schrift [monospace] kennt die <q>deutschen Anführungszeichen</q> nicht. Attributbedingte Formate
( wie: cite="Quelle">SELFHTML ) kommt später, gehört nicht hierher!
</p>
|
Der Kindselektor: >
Da [em] bereits Nachfahre von [p] ist, soll Element [del](K) Nachfahre von [em](E) sein.
Das stimmt natürlich nicht, das Element wird als Kind von [em] durch „>“ selektiert.
Nur dem Kindelement werden die Eigenschaft erteilt. Ähnliches Verhalten war aber bereits innerhalb der
Baumstruktur, ins em als Nachfahre „em ins“ selektiert, festzustellen.
37
38
|
#contained em > dfn { color: Red; }
#contained ins > span { color: Purple; letter-spacing: 1px; }
|
103
104
105
106
107
108
|
<p>
Da [em] bereits Nachfahre von [p] ist, soll <em>Element [del](K) <del>Nachfahre von [em](E)</del></em> sein.
Das stimmt natürlich nicht, <em>das Element <dfn>wird als Kind von [em]</dfn> durch „>“ selektiert.</em>
Nur dem Kindelement werden die Eigenschaft erteilt. Ähnliches Verhalten war aber bereits innerhalb der
Baumstruktur, ins <im></im> em als Nachfahre „em ins“ selektiert, festzustellen.
</p>
|
Dass Elemente bereits eigene Eigenschaften mitbringen, zeige ich auf Seite:
Noch ein paar Spielchen erlaube ich mir: ich bin mark p und
ich ein span mark und
ich ein em mark aber damit hier noch nicht Schluss ist,
folgt ein mark span mark p
womit mark nun color:Gold und den Zeichenabstand 3px von span > mark übernimmt.
Das scheint unendlich so weiter gehen zu können.
40
41
42
43
|
#contained em > mark { font-weight: bold; }
#contained span > mark{ color: Gold; background-color: MidnightBlue; } /* mark wird überschrieben */
#contained mark > span { color: yellow; background-color: navy; padding-right: 4px; padding-left: 4px; }
#contained mark > span > mark{ letter-spacing: 3px; }
|