Workshop CSS: Teil 4 - Selektoren II.
Verschachtelte Selektoren: Selektor Selektor
Verknüpft einen Selektor mit Stylesheet-Angaben, wenn dieser in einem anderen Selektor verwendet wird. Dies kann auch mehrere Ebenen tiefer sein.
,
,
,
,
,
,
<style type="text/css"><!--
h1 i {color:#ff0000;}
div span {color:#0000ff;}
//--></style>
</head>
<body>
<h1>Eine Überschrift <i>in rot</i>. Und wieder normal</h1>
<div>
<p>Ein Text <span>in blau</span>. Und wieder normal</p></div>
Die Deklaration h1 i {color:#ff0000;} weist einem <i>-Tag nur
eine rote Schriftfarbe zu, wenn es in einem <h1>-Tag
verwendet wird.
Ähnlich ist die zweite Zeile zu verstehen. div span {color:#0000ff;} weist dem
Inhalt eines <span>-Tag nur eine blaue Schriftfarbe zu, wenn es in einem
<div>-Tag vorkommt.
In diesem Fall ist das erst in der zweiten Ebene, weil da zwischen noch ein
<p>-Tag liegt.
Verschachtelte Selektoren: Selektor > Selektor
Verknüpft einen Selektor mit Stylesheet-Angaben, wenn dieser in einem anderen Selektor direkt eine Ebene tiefer verwendet wird.
,
,
,
,
,
<style type="text/css"><!--
h1 > i {color:#ff0000;}
div > span {color:#0000ff;}
//--></style>
</head>
<body>
<h1>Eine Überschrift <i>in rot</i>. Und wieder normal</h1>
<div><p>
Ein Text <span>nicht in blau</span>.
Und immer noch nicht in blau</p></div>
Die Deklaration h1 > i {color:#ff0000;} weist einem <i>-Tag
eine rote Schriftfarbe zu, da es in einem <h1>-Tag
verwendet wird.
Dem <span>-Tag wird in diesem Fall keine blaue Schriftfarbe zugewiesen, weil
es innerhalb des <div>- und <p>-Tags, also erst in zweiter Ebene
vorkommt.
Verschachtelte Selektoren: Selektor * Selektor
Verknüpft einen Selektor mit Stylesheet-Angaben, wenn dieser in einem anderen Selektor mindestens zwei Ebenen tiefer verwendet wird.
,
,
,
,
,
,
<style type="text/css"><!--
h1 * i {color:#ff0000;}
div * span {color:#0000ff;}
//--></style>
</head>
<body>
<h1>Eine Überschrift <i>nicht in rot</i>.
Und immer noch nicht in rot</h1>
<div><p>Ein Text <span>in blau</span>.
Und wieder normal</p></div>
Die Zeile h1 * i {color:#ff0000;} legt für ein <i>-Tag nur
eine rote Schriftfarbe fest, wenn es in einem
<h1>-Tag, aber erst zwei Ebenen tiefer vorkommt. Das ist in diesem Beispiel
nicht der Fall.
In der zweiten Zeile wird mit p * span {color:#0000ff;} einem
<span>-Tag nur eine blaue Schriftfarbe zugewiesen, wenn es in einem
<span>-Tag und mindestens zwei Ebenen tiefer verwendet wird, so wie in
diesem Beispiel.
Verschachtelte Selektoren: Selektor + Selektor
Verknüpft einen Selektor mit Stylesheet-Angaben, wenn dieser direkt nach einem anderen Selektor verwendet wird.
,
,
,
,
,
<style type="text/css"><!--
h1 + i {color:#ff0000;}
div + p {color:#0000ff;}
//--></style>
</head>
<body>
<h1>Eine Überschrift <i>nicht in rot</i>.
Und immer noch nicht in rot</h1>
<div><p>Ein Text .</p></div>
<p>Ein Text in blau.</p>
<p>Und wieder normal.</p>
Die Deklaration h1 + i {color:#ff0000;} weist einem <i>-Tag
nur eine rote Schriftfarbe zu, wenn es direkt nach einem
<h1>-Tag vorkommt. In diesem Beispiel ist es jedoch in einem <h1>-Tag
eingefügt.
div + p {color:#0000ff;} legt für ein <p>-Tag
nur eine blaue Schriftfarbe fest, wenn es nach einem <div>-Tag verwendet wird.
Verschachtelte Selektoren: Weitere Möglichkeiten
In den Beispielen oben habe ich nur HTML-Tags verschachtelt. du darfst natürlich alle Selektoren verschachteln und auch mehr als zwei. Schaue Dir dazu die folgenden Beispiele an.
,
,
,
,
,
<style type="text/css"><!--
div p *[href] {color:#ff0000;}
//--></style>
</head>
<body>
<div>
Ein Text und <a href="#">ein Hyperlink nicht in Rot</a>
</div>
<div><p>
Ein Text und <a href="#">ein Hyperlink in Rot</a>
</p></div>
<div><p><span>
Ein Text <a href="#">ein Hyperlink in Rot</a>
</span></p></div>
div p *[href] legt für einen attributabhängigen Selektor
eine rote Schriftfarbe fest, wenn dieser
- das Attribut
hrefenthält, - in einem
<p>-Tag verwendet wird, - und das
<p>-Tag in einem<div>-Tag vorkommt.
Das nächste Beispiel verknüpft einen Selektor mit Stylesheet-Angaben, wenn er direkt nach einem anderen Selektor verwendet wird.
,
,
,
,
,
<style type="text/css"><!--
div ol>li p {color:#ff0000;}
//--></style>
</head>
<body>
<div>
<ol>
<li>Ein Eintrag</li>
<li><p>Ein Eintrag in rot</p></li>
</ol>
</div>
div ol>li p legt für ein <p>-Tag
eine rote Schriftfarbe fest, wenn es
- in einem
<li>-Tag vorkommt. - Das
<li>-Tag muss in einer nummerierten Liste verwendet werden, - die in einem
<div>-Tag eingefügt ist.
Das letzte Beispiel verknüpft einen Selektor mit Stylesheet-Angaben, wenn er nach einem anderen Selektor verwendet wird.
,
,
,
,
,
,
<style type="text/css"><!--
.vis {visibility:hidden;}
a:hover .vis {visibility:visible;}
//--></style>
</head>
<body>
<a href="datei.htm">Klick<span class="vis">««</span></a>
Auch Pseudoformate und class-Selektoren
lassen sich verschachteln. a:hover .vis {visibility:visible;} legt für den
class-Selektor .vis den Wert visible fest,
wenn dieser in einem gehoverten Hyperlink verwendet wird,
d.h. wenn der User den Mauszeiger über den Hyperlink bewegt.