HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » CSS » Verknüpfungen

CSS: Verknüpfungen

von Jan Winkler

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.

Anzeige

CSS Level 1 Komma  nach oben

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*/ 

CSS Level 1 Punkt  nach oben

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'*/ 

CSS Level 1 Raute  nach oben

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'*/ 

CSS Level 1 Leerzeichen  nach oben

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*/ 

CSS Level 2 Stern  nach oben

Der Stern (*) bedeutet, dass alle Elemente gemeint sind; bezeichnet also alle Elemente. Beispiel:

* { ... }
/*Alle Elemente*/

*.ABC
/*Alle Elemente mit dem Attribut class="ABC"*/ 

CSS Level 2 Größer-Als  nach oben

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*/ 

CSS Level 2 Plus  nach oben

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*/ 

CSS Level 2 Attribute  nach oben

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*/ 

CSS Level 2 Attribut-Wert-Kombination  nach oben

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*/ 

CSS Level 2 Attribut-Wert-Auswahl  nach oben

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*/

CSS Level 2 Länderdefinition  nach oben

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  nach oben

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*/ 

Beachten Sie dabei jedoch, dass nicht mehrere Element-Attribut-Verknüpfungen (Punkt, Raute sowie Attributverknüpfungen) aneinander gereiht werden dürfen. Hierbei sollten stattdessen weitere Definitionen vorgenommen werden. Beispiel:

/* statt: */
P.abc#def { ... }

/* ... besser: */
P.abc { ... }
P#def { ... } 



« zurück weiter »
Bewerten

 

CSS

.Autor:Jan Winkler.
. Bewertung:
CSS: Verknüpfungen HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 450 Beiträge im CSS Forum .

Navigation

Images verschiedener Größe gleich anpassen von Alphavader
Seite verzerrt bei anderen Auflösungen. von Gorgomir
img Stretcher auf fluid Div Container von Thunder1985
Dropdown Menu unter den header von Harburger1887
Kreis um Buchstabe... von karinsch
footer unten platzieren von Alex...
css-anfaengerin - schreibschutz von css-tempate entfernen von kiloberta
Programmierer in Festanstellung oder Freiberuflich gesucht von GP.1226
Button Formatierungs Problem mit Transparentem Hintergrund von redlin
Runde Ecken IE 8 / ohne JavaScript und BG Bilder? von kamikaetzelein
3 Div Elemente ausrichten von Kanikkl
Bilder werden nur im IE angezeigt von Schmido
Contentinhalt vor Linkstruktur im Seitenquelltext von tbtip
Browserunterschiede in Darstellung von CrazyPlaya
Wie sollte ich das aufbauen? von Reelay

zum CSS Forum »


 
     
 

Anzeige