Malleus' Tutorials:
CSS3 - Selektoren

Version: 0.41 ( 15.10.2006 )

© Frank Hammerschmidt

Forum  - Javascript Spiele  - Javascript FAQ -  Impressum


Das W3C arbeitet momentan mit Hochdruck an der Fertigstellung der dritten CSS-Spezifikation.

Solltest Du keine Lust dazu haben, den dazugehörigen Working Draft vom 15. Dezember 2005 durchzuarbeiten, bist Du hier bei mir an der richtigen Stelle:

Da es bisher leider noch keinen 100% CSS3-konformen Browser gibt, werde ich mich auf die Punkte beschränken, die bereits von "irgendeinem" Browser ( z.B. Opera 9, Firefox 1.5.x ) umgesetzt wurden.

Viel Spaß damit!


Inhaltsangabe


Konventionen

Die nachfolgenden Beispiele sind wie folgt aufgebaut:

Formale Beschreibung einer Beispielregel bzw. -selektion
Das dazugehörige CSS-Stylesheet
Der HTML-Quelltext
Wie rendert "Dein" Browser das Beispiel?

 

1. Einfache Selektoren

 

1.1 Attribute

Bisher war es nicht möglich, einen CSS-Selector mit Hilfe eines Attributes zu spezifizieren, d.h. die folgende Regel konnte nicht interpretiert werden:

Für alle Links ( "A" ), die einen "onclick"-Eventhandler besitzen,
setze die Hintergrundfarbe auf "yellow".

Dies hat sich geändert! Nun ist folgendes möglich:

a[onclick] { background-color:yellow }
<a href="a1.php" onclick="return checkIt()">Gelb</a>
Demo: Hintergrund:Gelb Hintergrund:Transparent
 

Das ganze geht sogar ein gutes Stück weiter: Neben der Existenz eines Attributes kann jetzt auch auf dessen Wert abgeprüft werden:

Für alle Links ( "A" ), die in einem neuen Fenster geöffnet werden ( TARGET="_blank" ),
setze die Hintergrundfarbe auf "yellow".
a[target="_blank"] { background-color:yellow }
<a href="#" target="_blank">Gelb</a>
Demo: Hintergrund:Gelb Hintergrund:Transparent

Die Überprüfung des Wertes ist hierbei nicht auf dessen exakten Wert eingeschränkt:
Es ist zum Beispiel auch möglich, einen Teilwert innerhalb (" ~= " ) eines durch Leerzeichen unterteilten Attributwertes zu suchen. Diese Suche kann sogar auf den Anfang ( " ^= " ) bzw. das Ende ( " $= " ) des Attributwertes eingeschränkt werden:  

Für alle "SPAN"-Elemente mit einem Teilwert "yellow" des Attributes "attr",
setze die Hintergrundfarbe auf "yellow".
span[attr~=yellow] { background-color:yellow }
<span attr="a yellow z">Gelb</span>
Hintergrund:Gelb
Handelt es sich bei dem zu betrachteten Attribut um den Klassennamen ( "class" ), so könnte man anstelle von " span[class~=yellow] " auch die vereinfachte Form " span.yellow " nutzen.
 
Für alle "SPAN"-Elemente, deren Attributwert "attr" mit "yellow" beginnt,
setze die Hintergrundfarbe auf "yellow".
span[attr^=yellow] { background-color:yellow }

<span attr="yellow a z">Gelb</span>
<span attr="a yellow z">Transparent</span>
Hintergrund:Gelb Hintergrund:Transparent
 
Für alle "SPAN"-Elemente, deren Attributwert "attr" mit "yellow" endet,
setze die Hintergrundfarbe auf "yellow".
span[attr$=yellow] { background-color:yellow }

<span attr="a z yellow">Gelb</span>
<span attr="a yellow z">Transparent</span>
Hintergrund:Gelb Hintergrund:Transparent
 

Des Weiteren ist es möglich, eine einfache "inString"-Suche ( " *= " ) zu definieren, d.h. es wird überprüft, ob der zu suchende Wert "irgendwo" vorkommt. Er muß dabei nicht durch Leerzeichen getrennt sein!

Für alle Links, die ein Tutorial aufrufen,
setze die Hintergrundfarbe auf "yellow".
a[href*="tutorial"] {
                     background-color:yellow }
<a href="javascript/spiele/tutorial-words.html">Gelb</a>
<a href="#">Transparent</a>
Hintergrund:Gelb Hintergrund:Transparent
 

Auch ist es nun ein Leichtes, "sprachspezifische" Verweise zu finden:

Für alle Links, die auf eine "deutschsprachige" Seite ( "de", "de-CH", "de-AT" ) zeigen,
setze die Hintergrundfarbe auf "yellow".

a[hreflang|="de"] {
                background-color:yellow }

<a href="#" hreflang="de">Gelb</a> 
<a href="#" hreflang="de-CH">Gelb</a> 
<a href="#" hreflang="de-AT">Gelb</a>
<a href="#" hreflang="en-UK">Transparent</a>
Hintergrund:Gelb  Hintergrund:Gelb  Hintergrund:Gelb  Hintergrund:Transparent
 

1.2 Kombinationen

Manchmal kommt es vor, daß man Elemente anhand ihrer Position innerhalb der DOM spezifizieren will. Die einzigste Möglichkeit dies bisher zu tun, war die "Eltern/Nachkommen"-Beziehung, d.h. man listete die Elemente bzw. Selektoren nacheinander durch Leerzeichen getrennt auf:

Für alle "SPAN", die sich auf einer beliebigen Ebene unterhalb einer "TABLE" befinden,
setze die Hintergrundfarbe auf "yellow":

table span { background-color:yellow }

<table class="W"><tr>
<td class="TAc">Transparent <span>Gelb</span></td>
</tr></table>
Hintergrund:Transparent Hintergrund:Gelb
 

Hier wurde nachgebessert: Es ist nun möglich, eine "direkte" "Eltern/Kind"-Beziehung anzugeben:

Für alle "SPAN", die ein "DIV" als direkten Vorfahren haben,
also kein Enkel, Urenkel und dergleichen sind,
setze die Hintergrundfarbe auf "yellow".


div > span { background-color:yellow }


<div>
<span>Gelb</span>
<b><span>Transparent</span></b>
<span>Gelb</span>
</div>
Hintergrund:Gelb Hintergrund:Transparent Hintergrund:Gelb
 

Das ganze wurde sogar noch erweitert: Ein Element kann jetzt in Anhängigkeit seines "direkten" Vorgängers bestimmt werden:

Für alle "INPUT"-Controls, die direkt nach einem "LABEL" kommen,
setze die Hintergrundfarbe auf "yellow".
label + input { background-color:yellow }

<label>Name:</label><input type="text" value="Gelb">
<input type="text"">
 

Und zu guter Letzt besteht noch die Möglichkeit, Elemente auf der "gleichen" Ebene, also mit gleichem "PARENT", zu finden:

Für alle "SPAN" mit einem "INPUT"-Control als "Geschwisterchen",
setze die Hintergrundfarbe auf "yellow".

input ~ span { background-color:yellow }




<div>
<input>
<span>Gelb</span>
<b><span>Transparent</span></b>
<span>Gelb</span>
</div>
 Hintergrund:Gelb Hintergrund:Transparent Hintergrund:Gelb
 

2. Pseudo Class Elemente

 

2.1 Pseudo Status Elemente

Zur Verbesserung der Usability bei der Formulareingabe wurde einige neue Selektoren eingeführt:

:enabled |   :disabled |   :checked |   :indeterminate |   :focus |   :active

 

:enabled

Für alle editierbaren "INPUT"-Controls,
setze die Hintergrundfarbe auf "yellow".

input:enabled {
background-color:yellow
}

<form name="myForm">
<input type="text" name="myText1" value="Gelb"><br>
<button onclick="this.form.myText2.disabled=false">Enable</button>
<input type="text" name="myText2" disabled value="Transparent"><br>
</form>
 
 

:disabled

Für alle nicht editierbaren "INPUT"-Controls,
setze die Hintergrundfarbe auf "yellow".

input:disabled {
background-color:yellow
}

<form name="myForm">
<input type="text" name="myText1" disabled value="Gelb"> 
<input type="text" name="myText2" value="Transparent"><br>
<button onclick="this.form.myText2.disabled=true">Disable</button>
</form>
 
 

:checked

Für alle Checkboxen, die markiert wurden,
setze die Hintergrundfarbe auf "yellow".

input:checked {
                      background-color:yellow }

<form name="myForm">
<input type="checkbox" name="myCheckBox1" checked > 
<input type="checkbox" name="myCheckBox2">
</form>
 
 

:indeterminate

Für alle "RADIO"-Buttons, die initial nicht vorbelegt wurden,
setze die Hintergrundfarbe auf "yellow".
input:indeterminate {
background-color:yellow
}
<form name="myForm">
<input type="radio" name="myRadio"><input type="radio" name="myRadio">
</form>
 
 

:focus

Setze die Hintergrundfarbe des gerade focussierten Controls auf "yellow".


input:focus { background-color:yellow }


<form name="myForm">
Bitte in ein Feld klicken:
<input type="text" name="myText1">
<input type="text" name="myText2">
</form>
Bitte in ein Feld klicken: 
 

:active

Setze die Hintergrundfarbe des Controls, das gerade aktiviert wird, auf "yellow".

input:active {
               background-color:yellow }

<form name="myForm">
Bitte ins Feld klicken: <input type="text" name="myText">
<input type="button" name="myButton" value="Klick' mich!">
</form>
Bitte ins Feld klicken: 
 

2.2 Pseudo Struktur Elemente

Ein Element kann nun mit Hilfe seiner Position innerhalb der DOM "selektiert" werden:

:first-child |  :last-child |  :only-child |  :empty

 

:first-child

Wenn das erste Element eines Containers ein "SPAN" ist,
setze dessen Hintergrundfarbe auf "yellow".

:last-child

Wenn das letzte Element eines Containers ein "SPAN" ist,
setze dessen Hintergrundfarbe auf "green".
span:first-child { background-color:yellow }

span:last-child { background-color:green }
<div><span>1. SPAN ( Gelb )</span>
<span>2. SPAN ( Transparent )</span>
<span>3. SPAN ( Grün )</span></div>
1. SPAN ( Gelb ) 2. SPAN ( Transparent ) 3. SPAN ( Grün )
 

:only-child

Für jedes "SPAN", das das einzigste Kind seines "PARENT" ist,
setze die Hintergrundfarbe auf "yellow".
span:only-child {
background-color:yellow }
<div><span>Gelb</span></div>
<div><b>Text</b><span>Transparent</span><b>Text</b></div>
Hintergrund:Gelb

Text Hintergrund:Transparent Text
 

:empty

Für jedes leere "DIV" setze die Hintergrundfarbe auf "yellow".
div:empty { background-color:yellow }

<div style="width:200px;height:20px"></div>
<div>Hintergrund:Transparent</div>

Hintergrund:Transparent
 

2.3 Negation Class ( :not )

Mit der neuen Pseudo Klasse ":not" ist es möglich, eine "Für alle ... außer"-Regel zu spezifizieren:

Für alle "INPUT"-Controls, die "nicht" den Focus besitzen,
setze die Hintergrundfarbe auf "yellow"


input:not(:focus) { background-color: yellow }


<form name="myFormNot">
<input type="text" name="myText1">
<input type="text" name="myText2">
<input type="text" name="myText3">
</form>
Bitte in ein Feld klicken: 

Für alle "SPAN", die "nicht" die Klasse "notYellow" besitzen,
setze die Hintergrundfarbe auf "yellow"

span:not( .notYellow ) { background-color: yellow }

<span>Text1</span>
<span class="notYellow">Text2</span>
<span>Text3</span>
Text1 Text2 Text3

Für alle "SPAN", die kein Attribut "class" besitzen,
setze die Hintergrundfarbe auf "yellow"

span:not( [class] ) { background-color: yellow }

<span>Text1</span>
<span class="dummy">Text2</span>
<span>Text3</span>
Text1 Text2 Text3
 

3. Pseudo-Elemente

Pseudo Elemente sind virtuelle "SPAN"-Elemente, die dynamisch zur Laufzeit "berechnet" werden. Da es sich hierbei um "richtige" HTML-Elemente handelt, kann man sie auch dementsprechend "stylen".

::first-line |  ::first-letter |  ::before |  ::first-after  

::first-line

Setze die Hintergrundfarbe der erste Zeile aller "DIV"-Elemente auf "yellow".

::first-letter

Setze die Textfarbe des ersten Buchstabens aller "DIV"-Elemente auf "red".
div::first-line { background-color: yellow }
div::first-letter { color: red }
<div style="width:200px">Zwölf Boxkämpfer ...
</div>
Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich

Mit ::first-letter kann man auch einen anderen schönen Effekt erreichen:

Setze die Höhe des ersten Buchstabens eines Containers auf die doppelte Zeilenhöhe.
div {
border:solid 2px black;
padding:6px;
font-size: 12pt;
font-family: Verdana;
line-height:120% }

div::first-letter {
font-size: 40pt;
font-weight: bold;
padding-right:4px;
float: left;
font-family: Time New Roman }







<div style="width:220px">Franz jagt im komplett verwahrlosten Taxi
quer durch Bayern</div>






Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

Des Weiteren ist es mit Hilfe der Pseudo Elemente möglich, einen beliebigen Inhalt "vor" bzw. "hinter" einem Element zu erzeugen:

::before

Füge vor das Element mit der Id "myObj" einen Text ein.
Die Hintergrundfarbe dieses Textes soll "yellow" und der Abstand 100 Pixel sein.

::after

Füge hinter dem Element mit der Id "myObj" im Abstand von 100 Pixeln das Bild "hero.gif" ein.
#myObj::before {
content: "( Anfang ) ";
background-color: yellow;
margin-right:100px
}
#myObj::after {
content: "und ein Bild " url(hero.gif);
margin-left:100px
}




<span id="myObj">Dies ist ein Text</span>




Dies ist ein Text

Des Weiteren kann man sich den Wert eines beliebigen Attributes des selektierten Elementes anzeigen lassen:

Gebe hinter jedem SPAN-Element dessen ID aus.
span::after { content: "ID " attr ( id ) "." }

<span id="myObj1">Dieses SPAN hat die </span>
<span id="myObj2">Dieses SPAN hat die </span>
Dieses SPAN hat die
Dieses SPAN hat die

 

counter

Eine weitere interessante Möglichkeit besteht darin, "::before" mit einem Selektor-"Counter" zu kombinieren:

Schreibe automatisch vor alle "P"-Elemente einen Laufindex, der mit "0" beginnt.
Solltest Du auf ein "SPAN" treffen, fange wieder bei "0" an zu zählen.
p { counter-increment: pCounter } // "pCounter" ist eine frei wählbare ID

p::before {
  content: counter( pCounter, decimal-leading-zero ) ". P-Tag"
  //  Der Wert des Counters mit der ID "pCounter" wird ausgegeben.
  // "decimal-leading-zero" ist ein "list-style-type"-Wert
}

span { counter-reset: pCounter } // Reset des "pCounter"-Counters
<p></p>
<p style="display:none"></p>
<p></p>
<div> --- </div>
<p></p>
<span> Reset </span>
<p></p>
<p style="visibility:hidden"></p>
<p></p>

---

Reset

Hierbei ist folgendes zu beachten:

  • Durch "display:none" versteckte Elemente werden im Gegensatz zu "visibility:hidden" nicht mitgezählt!

  • Anstelle des "list-style"-Types kann man folgende Werte bei der Counterausgabe ("content") angeben:
    • - disc, circle, square
    • - decimal ( Defaulteinstellung ) , decimal-leading-zero, lower-roman, upper-roman
    • - lower-latin, lower-alpha, upper-latin, upper-alpha
    • - lower-greek, georgian, armenian

Durch den Einsatz mehrerer Counter ist es sogar möglich, eine richtige Gliederungshierachie aufzubauen:

Berechne für alle H1, H2 und H3-Elemente den Gliederungsindex.
h1 {
counter-increment: h1Counter;
counter-reset: h2Counter
}

h2 {
counter-increment: h2Counter;
counter-reset: h3Counter
}

h3 { counter-increment: h3Counter  }

h1::before { content: counter( h1Counter ) ". " }

h2::before { content: counter( h1Counter ) "." counter( h2Counter ) " " }

h3::before { content: counter( h1Counter ) "." counter( h2Counter ) "." counter( h3Counter ) " " }

h2 { margin-left:20px }

h3 { margin-left:40px }

<h1>Kapitel</h1>

	<h2>A</h2>

		<h3>E</h3>
		<h3>F</h3>
		<h3>G</h3>

	<h2>B</h2>

		<h3>H</h3>
		<h3>I</h3>
		<h3>J</h3>


<h1>Kapitel</h1>

	<h2>C</h2>

		<h3>K</h3>
		<h3>L</h3>
		<h3>M</h3>

	<h2>D</h2>

		<h3>N</h3>
		<h3>O</h3>
		<h3>P</h3>



Kapitel

A

E

F

G

b

H

I

J

Kapitel

C

K

L

M

D

N

O

P


Für den Fall, daß der Counter nicht um eins erhöht werden soll, gibt man als zweiten Parameter des "counter-increment"-Properties den entsprechenden Wert an:

Erstelle einen "H1"-Counter, der nur gerade Zahlen erzeugt.
h1 { counter-increment: h1Counter 2 }

h1::before { content: counter(h1Counter) ". " }
<h1>Kapitel</h1>
<h1>Kapitel</h1>
<h1>Kapitel</h1>

Kapitel

Kapitel

Kapitel