CSS: Verknüpfungen
Verknüpfungen verbinden zwei Elemente oder ein Element mit einem Attribut durch einen logischen Zusammenhang. Dies stellt eine (neue) Variante des Elements dar. Die Verknüpfung der beiden bezeichnet diese Variante. Dies lässt es zu, Elemente besser zu definieren. Dabei können z.B. bestimmte Elemente/Elementvarianten ein- oder ausgeschlossen werden.Allgemein werden Verknüpfungen direkt an den Elementnamen notiert.
Komma
Das Komma (,) verbindet mehrere Elemente durch UND. Damit kann die gleiche Definition auf mehrere Elemente angewandt werden. Beispiel:
P, DIV { ... }
/*Alle Elemente P und DIV*/
H1, H2, H3, H4 { ... }
/*Alle Elemente H1, H2, H3 und H4*/
Punkt
Der Punkt (.) verbindet jeweils Elementnamen und Klassenbezeichnung (class=""). Die entstehende Elementvariante bezeichnet alle Elemente, die den definierten Namen sowie die definierte Klassenbezeichnung enthalten. Beispiel:
P.Klassenbezeichnung { ... }
/*Alle Elemente P mit der Klassenbezeichnung 'Klassenbezeichnung'*/
TABLE.MeineTabelle { ... }
/*Alle Elemente Table mit der Klassenbezeichnung 'MeineTabelle'*/
Raute
Die Raute (#) verbindet jeweils Elementnamen und ID (id=""). Die entstehende Elementvariante bezeichnet das Element, dass die definierte ID enthält. Beispiel:
P#ID { ... }
/*Das Element P mit der ID 'ID'*/
DIV#MeinDiv { ... }
/*Das Element DIV mit der ID 'MeinDiv'*/
Leerzeichen
Das Leerzeichen (' ') verbindet zwei Elemente. Es bezeichnet dabei das zweite Element, wenn es im ersten enthalten ist. Beispiel:
P STRONG { ... }
/*Alle Elemente STRONG, wenn sie in einem Element P enthalten sind*/
DIV SPAN { ... }
/*Alle SPAN, wenn sie in einem DIV enthalten sind*/
Stern
Der Stern (*) bedeutet, dass alle Elemente gemeint sind; bezeichnet also alle Elemente. Beispiel:
* { ... }
/*Alle Elemente*/
*.ABC
/*Alle Elemente mit dem Attribut class="ABC"*/
Größer-Als
Das Größer-als-Zeichen (>) verbindet zwei Elemente. Es bezeichnet dabei das zweite Element, wenn es "Kind" des ersten Elements ist. Beispiel:
OL > LI { ... }
/*Alle Li, wenn sie "Kind(er)" von OL sind*/
Plus
Das Plus (+) verbindet zwei Elemente. Es bezeichnet dabei das zweite Element, wenn es direkt dem ersten Element folgt (<p><em> ... </em> ... </p>). Beispiel:
P + EM { ... }
/*Alle EM, wenn sie direkt nach einem P folgen*/
Attribute
Durch zwei eckige Klammern, die den Namen des Attributes einschließen ([ Attributname ]), wird das Element, mit dem in den Klammern definierten Attribut verknüpft. Es werden dabei jeweils alle Elemente angesprochen, die den selben Elementnamen tragen und das bezeichnete Attribut enthalten. Beispiel:
A[target] { ... }
/*Alle A, wenn sie ein Attribut namens target haben*/
Attribut-Wert-Kombination
Durch zwei eckige Klammern, die den Namen des Attributes sowie den dazugehörigen Wert einschließen ([ Attributname =" Wert " ]), wird ein Element, mit der in den Klammern definierten Attribut-Wert-Kombination verknüpft. Es wird dabei jedes Element bezeichnet, das den selben Elementnamen trägt und die definierte Attribut-Wert-Kombination enthält. Beispiel:
A[target="_top"] { ... }
/*Alle A, wenn sie ein Attribut namens target und dem
dazugehörigen Wert _top, also target="_top", haben*/
Attribut-Wert-Auswahl
Durch zwei eckige Klammern, die den Namen des Attributes sowie dazugehörige Werte einschließen ([ Attributname ~=" Werte " ]), wird ein Element, mit der in den Klammern definierten Attribut-Werte-Kombination verknüpft. Dabei können mehrere Werte (durch Leertasten getrennt) notiert werden. Diese müssen durch ~= (statt nur =) mit dem Attributnamen verbunden werden. Es wird dabei jedes Element bezeichnet, das den selben Elementnamen trägt und das definierte Attribut mit einem der definierten Werte enthält. Beispiel:
A[target~="Frame1 Frame2 "] { ... }
/*Alle A, wenn sie ein Attribut namens target und
dem dazugehörigen Wert Frame1 ODER Frame2, also
target="Frame1" oder target="Frame2", haben*/
Länderdefinition
Durch zwei eckige Klammern, die den Namen des Attributes sowie dazugehörige Werte einschließen ([ Attributname |=" Werte " ]), wird ein Element, mit der in den Klammern definierten Attribut-Werte-Kombination verknüpft. Dabei können mehrere Werte (durch Bindestriche getrennt) notiert werden. Diese müssen durch |= (statt nur =) mit dem Attributnamen verbunden werden. Dies ist dazu da, Sprachen, Dialekte, Länderbezeichnungen u.ä. definieren zu können (RFC 1766). Es wird dabei jedes Element bezeichnet, das den selben Elementnamen trägt und das definierte Attribut mit einem der definierten Werte enthält. Beispiel:
P[lang|="en-US"] { ... }
/*Alle P, wenn sie mit englischer oder US-amerikanischer
Sprache definiert sind.*/
Verknüpfung von Verknüpfungen
Natürlich ist es auch möglich mehrere Elemente mit einander zu verknüpfen oder auch Verknüpfungen wieder (weiter) zu verknüpfen. Beispiel:P EM.abc { ... }
/*Alle EM, wenn die innerhalb eines P liegen und der
Klasse abc entsprechen*/
P.abc EM.def { ... }
/*Alle EM der Klasse def die innerhalb eines P der Klasse
abc liegen*/
/* statt: */
P.abc#def { ... }
/* ... besser: */
P.abc { ... }
P#def { ... }
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Farbe und Hintergrundgestaltung
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project