CSS/Selektoren/Terminologie

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Diese Seite soll eine Übersicht über Begrifflichkeiten im Zusammenhang mit CSS geben. Weitere Definitionen befinden sich unter anderem im Glossar.

Selektoren[Bearbeiten]

Ein CSS-Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Satz an CSS-Deklarationen auf das Element angewendet wird. Der Selektor ist somit der Teil vor den geschweiften Klammern.

Beispiel
Selektor { /* CSS-Deklarationen */ }

In CSS werden verschiedene Arten von Selektoren unterschieden:

Einfache Selektoren[Bearbeiten]

Einfache Selektoren sind Universalselektor, Typselektor, Klassenselektor, ID-Selektor, Attributselektor und Pseudoklassen.

Verbundene Selektoren[Bearbeiten]

Ein verbundener Selektor ist eine Kette von einfachen Selektoren, die nicht mit Hilfe eines Kombinators verkettet wurden. Verbundene Selektoren beginnen immer mit einem Typselektor oder einem Universalselektor, wobei der Universalselektor auch impliziert sein kann. Im weiteren Verlauf der Kette sind kein weiterer Typ- und kein weiterer Universal-Selektor erlaubt.

Kombinatoren[Bearbeiten]

Ein Kombinator stellt eine Beziehung zwischen zwei verbundenen Selektoren her.

Komplexe Selektoren[Bearbeiten]

Ein komplexer Selektor ist eine Verkettung von einem oder mehreren verbundenen Selektoren durch Kombinatoren.

Selektor-Listen[Bearbeiten]

Eine Selektor-Liste ist eine komma-separierte Liste von beliebigen Selektoren, auf welche die selben CSS-Deklarationen angewendet werden sollen.

Beispiel
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
h1, h2, h3 { font-family: sans-serif }
Beide Beispiele setzen für die Überschriften 1., 2. und 3. Ordnung die Eigenschaft font-family auf den Wert sans-serif. Bei dem zweiten Beispiel handelt es sich um eine Selektor-Liste.
Beachten Sie: Ist mindestens ein Selektor der Liste fehlerhaft, werden die CSS-Deklarationen auf kein Element angewendet, auch wenn die anderen Selektoren der Liste korrekt sind.

Profile[Bearbeiten]

Selektoren werden in vielen unterschiedlichen Zusammenhängen verwendet, welche sehr unterschiedliche Anforderungen benötigen. Einige mächtige Selektoren sind leider zu langsam, um sinnvoll in leistungskritischen Anwendungen eingesetzt zu werden. Die CSS-Spezifikation berücksichtigt dies durch zwei verschiedene Profile.

Fast Selector Profile[Bearbeiten]

Das Fast Selector Profile kann in jedem Kontext, einschließlich dynamischer Selektor-Auswahl in einem Browser, verwendet werden. Es beinhaltet mit folgenden Ausnahmen alle Selektoren:

Complete Selector Profile[Bearbeiten]

Das Complete Selector Profile kann in Kontexten genutzt werden, in denen die Performance keine wichtige Rolle spielt. So sollte beispielsweise bei einer Implementierung der Selektoren-API dieses Profil verwendet werden. Es beinhaltet alle definierten Selektoren.

Hinweis

Da zu Selectors Level 4-konforme CSS-Implementierungen das Fast Selector Profile verwenden müssen, ist grundsätzlich zu empfehlen das Vorliegen des Fast Selector Profiles anzunehmen und somit zuvor genannte Einschränkungen zu berücksichtigen.

Indexbasierte Pseudo-Klassen: Die An + B Mikrosyntax[Bearbeiten]

Einige Pseudoklassen verwenden eine Mikro-Syntax, um bestimmte Elemente einer Liste aus Elementen mit Hilfe ihrer Indizes zu selektieren. Diese Syntax wird An + B-Notation genannt. Mit Hilfe dieser Syntax werden nach einem Versatz B alle A-ten Elemente selektiert.

Beachten Sie: Die Zählung der Elemente beginnt bei 1 und nicht bei 0 (wie es bspw. in vielen Programmiersprachen der Fall ist), die Zählung der Laufvariablen n hingegen bei 0 (s.a. die folgenden Beispiele).

Die Syntax akzeptiert auch die Werte even und odd:

Wert Entsprechung in An + B Bedeutung
even 2n + 0 alle Elemente mit geradem Index, also das 2., 4., 6., ... Element
odd 2n + 1 alle Elemente mit ungeradem Index, also das 1., 3., 5., ... Element
Beispiel
2n + 0   /* selektiert alle Elemente mit geradem Index  */
even     /* selektiert auch alle Elemente mit geradem Index */
4n + 1   /* selektiert das 1., 5., 9., 13., ... Element */
4n+1     /* Whitespace wird ignoriert, daher gleiches Ergebnis wie Zeile zuvor */
4n       /* selektiert das 4., 8., 12., 16., ... Element; B darf 0 sein */
n+2      /* selektiert alle Elemente außer dem ersten Element; entspricht A = 1 */
0n+2     /* selektiert das zweite Element; auch A darf 0 sein */
2        /* gleiches Ergebnis wie Zeile zuvor (A = 0) */
n        /* alle Elemente der Liste */
Für A und B dürfen auch negative Werte angegeben werden, allerdings werden nur Elemente selektiert, bei denen An + B für n ≥ 0 positiv ist:
-n + 6   /* selektiert die ersten 6 Listenelemente */
Beachten Sie: Werden A und B gleich 0 gesetzt, so werden keine Elemente selektiert.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]