Inhaltsangabe

• 1. Einfache Selektoren
  
  
  • 1.1 Attribute
    
    *[attr]
    *[attr=value]
    *[attr~=value]
    *[attr^=value]
    *[attr$=value]
    *[attr*=value]
    *[attr|=value]
  
  
  • 1.2 Kombinationen
    selector1 " " selector2
    selector1 ">" selector2
    selector1 "+" selector2
    selector1 "~" selector2
  
  
• 2. Pseudo Class Elemente
  
  
  • 2.1 Pseudo Status Elemente
    :enabled
    :disabled
    :checked
    :indeterminate
    :focus
    :active
    
    
    
  • 2.2 Pseudo Struktur Elemente
    :first-child
    :last-child
    :only-child
    :empty
    
    
  • 2.3 Negation ( :not )
  
  
  • 3. Pseudo Elemente
    ::first-line
    ::first-letter
    ::before
    ::after
    
    counter
    
    

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

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>

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>

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>

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>

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>

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>

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

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

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>

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>

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>

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>

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>

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>

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  

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

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>

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>

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

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

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>

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>

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>

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>

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>