⬆

CSS Selektoren

Es gibt viele Möglichkeiten Selektoren zu defininieren. Man sollte auch hier nicht versuchen Lösungen zu finden, zu Problemen, die es gar nicht gibt.

siehe auch

Selektoren

Spezifität | Wertigkeit der Selektoren

Selektor Beispiel Spezifität (Punkte)
Globalselektor *  
Elementselektor
Pseudoelement		 body, div, p, b, a
a:before		 1
Klassenselektor
Attributselektor
Pseudoklasse

.grau, .name
a[rel]
a:visited

10
ID-Element #leinwand, #kopf, #fusszeile 100
Style als HTML Attribut style="color: red" 1000

Eine genaue Ansicht der Regelung findet man unter Spezifität bei Selfhtml.

Spezifität Beispiele
Selektor A B C D
style= (HTML) 1 0 0 0
#nav a.xy 0 1 1 1
#nav li a 0 1 0 2
#nav a 0 1 0 1
#nav 0 1 0 0
ul li .xy 0 0 1 2
a:link 0 0 1 1
a.xy 0 0 1 1
ul[id="nav"] 0 0 1 1
*.xy 0 0 1 0
li a 0 0 0 2
a 0 0 0 1

 

Universal Selektor

Mit dem Sternchen werden alle Elemente ausgewählt. Diesen Selektor kann man dazu einsetzen, eine einheitliche Ausgangssituation zu schaffen. Siehe dazu das Thema Reset

* {Eigenschaft: Wert}

* {color: #000;}

Element Selektor

Html-Element {Eigenschaft: Wert}

Beispiel

p {color: #000;}

Die einfachste Art eine CSS Eigenschaft zuzuweisen ist per Element Selektor. Gerade in HTML5, wo es viele neue semantische Elemente gibt.

descendant combinator / Nachfahren Selektor

Selektor1 Selektor2 {Eigenschaft: Wert}

Beispiel

p b {color: #000;}

Mit dem Nachfahren Selektor kann man bestimmen, das Elemente nur ausgewählt werden, wenn sie sich innerhalb anderer Elemente befinden. Im Beispiel oben wird b nur dann formatiert, wenn es sich in einem p befindet. Man spricht hier auch von abhängigen Selektoren.

so sieht's aus

child selector / Kind Selektor

Selektor1>Selektor2 {Eigenschaft: Wert}

Beispiel

p>b {color: #000;}

Der Kind Selektor ist ein direkter Nachfahre.

so sieht's aus

general sibling combinator / Geschwister Selektor

Selektor1~Selektor2 {Eigenschaft: Wert}

Beispiel

cite~small {background-color: #fab;}

Der general sibling combinator weist die Eigenschaft dem Selektor2 nur zu, wenn Selektor1 und Selektor2 dasselbe Eltern Element besitzen und Selektor 2 auf Selektor 1 folgt (er muss nicht unbedingt direkt darauf folgen).

so sieht's aus

adjascent sibling combinator / Nachbar Selektor

Selektor1 + Selektor2 {Eigenschaft: Wert}

Beispiel

cite + small {background-color: #fab;}

Der adjascent sibling combinator weist die Eigenschaft dem Selektor2 nur zu, wenn Selektor1 und Selektor2 direkt aufeinander folgen und wenn beide dasselbe Eltern Element besitzen.

so sieht's aus

class selector / Klassen Selektor

.Klassenname {Eigenschaft: Wert}

Beispiel

.tipp {background-color: #fab;}

Wenn die sematischen Elemente in HTML5 nicht mehr ausreichen kann man eigene Klassen definieren. Es sind Elemente mit Gemeinsamkeiten. Man weist einem HTML Element eine Klasse mit dem Schlüsselwort class zu.

<p class="tipp">Das p- Element steht für Absatz</p> In der Style Defininition wird der Klassenselektor ein Punkt vorangestellt, gefolgt vom Namen der Klassen. Es gelten die üblichen Regeln für die Namensvergabe und der Klassenname sollte nicht mit einer Zahl beginnen.

Man kann einem Element auch mehrere Klassen zuweisen. Die Namen werden innerhalb der Wertzuweisung mit Leerzeichen aufgeführt. Im folgenden Beispiel wurden dem p- Element die Klassen tipp und wichtig zugewiesen.

<p class="tipp wichtig">Das P Element</p>

id selector / ID Selektor

#IdName {Eigenschaft: Wert}

Beispiel

#werbung {background-color: #fab;}

Ähnlich wie der Klassenselektor erstellt man eigene IDs und weist diese einem HTML Element zu. Im Gegensatz zur Klasse, darf eine ID mit einem Wert dokumentweit nur einmal zugewiesen werden. Eine Klasse kann man auch mehreren Element zuweisen. Eine id dient als eindeutige Identifizierung einer bestimmten Stelle im HTML Dokument. Sie wird auch für Programierungen und für Ankerlinks verwendet. Es gelten die Reglen der Namensvergabe und eine Id sollte nicht mit einer Zahl beginnen.

<div id="werbung">Werbebanner</div>

Attribut Selektor

Selektor[Attribut] {Eigenschaft: Wert}

Beispiel

a[rel] {background-color: #fab;}

Mit dem Attribut Selektor kann man bestimmte Elemente mit einem Attribut auswählen. Im vorigen Beispiel alle a- Elemente mit dem Attribut rel. Es ist außerdem möglich, die Werte der Attribute abzufragen. So dass ein Element nur ausgewählt wird, wenn das Attribut einen bestimmten Wert hat, oder wenn in der Wertzuweisung bestimmte Phrasen vorkommen. Hierzu gibt es ein paar ausgeklügelte Abfragen.

Attribut Selektoren
[Attribut] a[rel] {background-color: #fab;} Jedes Element mit diesem Attribut
[Attribut="Wert"] a[rel="external"] {background-color: #fab;} Elemente mit diesem Attribut und dieser Wertzuweisung
[Attribut~="Wert"] p[class~="foo"] {background-color: #fab;}
<p class="foo bar"> 		Das Attribut kann mehrere Werte beinhalten, die mit Leerzeichen getrennt aufgeführt werden. Wenn eines der Werte diesem entspricht, wird die Anweisung ausgeführt. Die Reihenfolge ist egal.
[Attribut|="Wert"] p[class|="foo"] {background-color: #fab;}
<p class="foo-bar"> 		Es reicht wenn der Wert diesen Teil enthält und dieser am Anfang steht und am Ende des Wertes ein Minuszeichen steht.
[Attribut^="Wert"] p[class^="foo"] {background-color: #fab;}
<p class="foobar"> 		Ein Attribut dessen Wert mit diesen Zeichen beginnt.
[Attribut$="Wert"] p[class$="foo"] {background-color: #fab;}
<p class="barfoo"> 		Ein Attribut, dessen Wert mit diesen Zeichen endet. Beispielsweise für verschiedene Bilddateitypen, alle Attribute src mit der Endung jpg. siehe Beispiel
[Attribut*"Wert"] p[class*="foo"] {background-color: #fab;}
<p class="barfoolio"> 		Das Sternchen bedeutet die Zeichenfolge muss irgendwo vorkommen.

Pseudoklassen / Pseudoelemente

Siehe Pseudoklassen bei Selfhtml
Siehe auch Unterschied Pseudoklassen & Pseudoelemente
Siehe die Übersicht Pseudoklassen / Pseudoelemente
Siehe Pseudoklassen w3schools

Pseudoklassen beschreiben Elemente, die nicht vom Document Tree DOM abgeleitetwerden können. Sie ergeben sich aus den Umständen oder werden durch User Interaktion bestimmt wird (a:hover) Ausnahmen sind hier (:first-child, :lang).

Pseudoelemente sind Elemente wie etwa das erste Zeichen oder die erste Zeile eines Absatzes. Mit Pseudoelementen können Strukturen vor oder nach dem Inhalt eines Elementes eingefügt werden, etwa eine automatische Numerierung oder Anführungszeichen bei Zitaten, aber es können auch inhaltlich nicht relevante Texte oder Bilder hinzugefügt werden. Außerdem kann man in einer Reihe von Elementen das erste, das soundsovielte oder letzte Element oder alle übernächsten Elemente auswählen.

siehe auch Wikibooks

2 Doppelpunkte

Ein Pseudoelement wird laut ne

uestem CSS3 Standard nach dem Element hinter 2 Doppelpunkten notiert. Allerdings setzen noch nicht alle Browser diese neue Schreibweise um, von daher empfiehlt es sich erst noch die alte Schreibeweise mit einem Doppelpunkt zu benutzen.

a::visited = neue Schreibweise
a:visited = alte Schreibweise (im Moment noch zu bevorzugen).

Die mit CSS3 neu eingeführten Selektoren (z.B. ::selection) müssen jedoch mit zwei Doppelpunkten geschrieben werden

Die Bezeichnungen sind fest vorgegeben Schlüsselwörter. Sie stellen einen möglichen Zustand oder eine Position eines Elements dar.

Pseudoklasse :first-child

li:first-child{background-color: #fab;}

Beispiel

Das erste Kindelement eines übergeordneten Elements. In diesem Falle das erste li Element.

Link Pseudoklassen :link und :visited

Besuchte und unbesuchte Hyperlinks, also a Elemente mit dem Attribut href werden vom Default Style des Browsers anders eingefärbt. Hier kann man mit den Pseudoklassen :link und :visited eigene Formatierungen vornehmen. :link steht für unbesuchte und :visited für besuchte Links.

a:link {Eigeschaft:Wert;}
a:visited {Eigeschaft:Wert;}

Beispiel

Link Pseudoklassen :hover :active :focus

Am häufigsten wird man :hover einsetzen, denn es bedeutet, der Link wird mit Maus berührt. :active steht für Aktivieren und :focus wenn der Fokus auf den Link gesetzt wird, das kann auch mit der Tabulator Taste geschehen. Im Gegensatz zu den Linkpseudoklassen :link und :visited schließen sich diese Klassen nicht gegenseitig aus. Wenn man hier 2 gleiche Eigenschaften mit unterschiedlichen Werten für 2 Pseudoklassen vergibt entscheidet sich der Browser für die zuletzt vergebene. Ein Element welches bei focus grün ist und gleichzeitig mit der Maus überfahren wird, was als rot dargestellt werden soll, wird rot dargestellt, sofern hover nach focus notiert ist.

Diese Reihenfolge einhalten !

a:focus {Eigeschaft:Wert;}
a:hover {Eigeschaft:Wert;}
a:active {Eigeschaft:Wert;}

Beispiel

Es gibt kein Hover auf Smartphones!
Tabletts und Smartphones übersetzen ein :hover über einem Link direkt in einen Mausklick.

Pseudoelemente :first-line und :first-letter

p:first-line {Eigeschaft:Wert;}
article:first-letter {Eigeschaft:Wert;}

Beispiel

Mit :first-line wird die erste Zeile ausgewählt. Mit first-letter der erste Buchstabe. Hiermit lassen sich in der Tradition der alten Bibeln große Anfangsbuchstaben erzeugen.

Pseudoelemente :before und :after

a:before {Eigenschaft: Wert;}
a:after {Eigenschaft: Wert;}

Mit diesen beiden Pseudo Elementen kann man beispielsweise Bilder oder Text vorne oder hinten an das Element hinzufügen. Dazu verwendet man die Eigenschaft content mit einem url() Wert. Eine andere Möglichkeit wäre es die Währung hinter den Preis zu notieren.

Achtung! Es ist wichtig zu verstehen, dass die angehängten Elemente nicht nach dem Blockelement aufgeführt werden sondern innerhalb davon, an erster oder an letzter Stelle.

h1.gebet:before {content: url("../../img/gebet.gif");

Beispiel mit Bildern

td:nth-child(3):after{content:" EUR";}

Beispiel mit Text

Beipsiel mit Sprechblase

weitere Varianten Sprechblasen: mit after

Pseudoklasse :lang

div:lang(en) {color: #fab;}

Hiermit werden Elemente ausgewählt, denen in HTML eine bestimmte Sprache zugewiesen wurde.

Pseudoklasse: not()

div:not(#footer) {color: #fab;}

Hiermit lassen sich Elemente ausschließen. Im Beispiel werden alle divs ausgewählt, bis auf das div, dem die id="footer" zugewiesen wurde.

Beispiel

Ein anderes nützliches Beispiel ist, dass man alle a- Elemente auswählt die als Links fungieren, bis auf die a- Elemente welche mit dem veraltetem name Attribut versehen sind, um als Anker zu dienen. Stattdessen könnte man aber auch genausogut alle a Elemente mit dem Attribut href wählen. Das funktioniert genausogut.

a:not([name]) {background-color: #fab;}
so sieht`s aus

Pseudoklasse: nth-child(n)

nth-child Selfhtml Wiki


li:nth-child(3) {background-color: #fab;}

Beispiel

Beispiel mit mehreren Pseudo Selektoren

Hiermit lässt sich das soundsovielte Kindelement des Elternelements auswählen. nth kommt vom englischen the seventh. In der Kurzschreibweise 7th. Nun braucht man nur noch anstatt 7 n für Number einsetzen und es macht Sinn.

Achtung! Was passiert, wenn es auch Kindelemente eines anderen Typs gibt? Sie werden mitgezählt.
so sieht`s aus

:nth-child
Regel   Bedeutung
:nth-child(an+b) (3n+0)

Das Beispiel wählt jedes dritte. Die 0 ist ein Offsetwert oder Startwert. Umgangsprachlich ausgedrückt selektiert es jedes "a"te Element ab den "b"ten Element. Mathematisch ausgedrückt selektiert es all diejenigen Kindelemente deren „Platznummer“ bei Division durch a den Rest b lässt.

:nth-child(odd) (odd) ist identisch zu :nth-child(2n+1) und :nth-child(2n-1) (ungerade Platznummer).
:nth-child(even) (even) ist identisch zu :nth-child(2n) (gerade Platznummer). Diese beiden Selektoren werden auch gerne eingesetzt, um Tabellenreihen einzufärben. Siehe Beispiel
:nth-child(b) (3) selektiert nur das b-te Kindelement.
:nth-child(n) (n) selektiert alle Kindelemente. Das kann man auch mit dem Offsetwert kombinieren. (n+3) wählt alle ab dem dritten aus.

Pseudoklasse: nth-last-child(n)

li:nth-last-child(3) {background-color: #fab;}

Beispiel

Hierbei wird von hinten gezählt.

Pseudo :nth-last-child()

Pseudoklasse:nth-of-type(n)

p:nth-of-type(2n) {color: #fab;}

Beispiel

Im diesem Beispiel werden nur die Elemente gleichen Typs, also alle p-Elemente eingefärbt.

Was genau der Unterschied zwischen nth-child und nth-of-type ist, kann man an diesen beiden Beispiele sehen.
Beispiel nth-child
Beispiel nth-of-type

 

Tricks & Techniken

Weitere Beispiele in diesem Tutorial

Navigationen Menüs siehe hier