Die wichtigsten Selektoren in CSS

Anfänger9 Mai 2019HTML5HTMLCSS
Übersicht der wichtigsten und am häufigsten verwendeten CSS-Selektoren
Noch keine Stimmen abgegeben
Noch keine Kommentare

Stern Selektor

Einer der grundlegendsten Selektoren in CSS ist der * -Selektor. Mit diesem Selektor können beliebige Elemente einer Seite ausgewählt werden:

* {
    margin: 0;
    ...
}

Der Selektor wird häufig eingesetzt um margin oder padding (und auch andere Attribute) zu normalisieren, weil unterschiedliche Browser hier häufig verschiedene Werte verwenden.

Der * Selektor kann nat√ľrlich mit anderen Selektoren verschachtelt werden, zB. div * { ... } um alle Elemente aller div Knoten auszuw√§hlen.

ID Selektor

Der ID Selektor #ID dient um einen bestimmten Knoten mit einer eindeutigen id zu selektieren, zB. <div id="test"></div>

#test { ... }

Class Selektor

Jedes HTML Element kann ein class Attribut haben. Mit dem Klassen-Selektor können dann solche Elemente gezielt ausgewählt werden, zB. <div class="test"></div>

.test { ... }

Bei dem Klassen-Selektor wird im Css einfach ein Punkt vor dem Namen der Klasse gesetzt.

Element Selektor

Elementen Selektor dient zur Auswahl ganzer HTML Elemente, zB. h1 { font-size: 1rem } . Dieser Selektor kann auch verschachtelt werden zB.

article h1 { font-size: 1.2rem }

In diesem Beispiel werden nur h1 Elemente, die innerhalb eines <article>...</article> Knoten vorkommen, selektiert.

Pseudoklassen Selektoren

Über Pseudoklassen können Elemente selektiert werden, die eine bestimmte Eigenschaft besitzen. Man unterscheidet grundsätzlich zwischen strukturellen (durch Anordnung der Elemente) und dynamischen (durch eine dynamische Eigenschaft) Pseudoklassen.

Zu den am häufigsten benutzen Pseudoklassen gehören:

  • :first-child erstes Kind-Element
  • :last-child letztes Kind-Element
  • :nth-child() n-tes Kind-Element, zB. :nth-child(odd) oder nth-child(2n+1) f√ľr alle ungeraden Kind-Elemente
  • :first-of-type() erstes Kind-Element eines bestimmten Types
  • :last-of-type letztes Kind-Element eines bestimmten Types
  • :nth-of-type() n-tes Kind-Element eines bestimmten Types
  • :visited besuchte Link Elemente
  • :hover, :active, :focus von Mauszeiger erfasste Elemente, gerade angeklickte Links, Elemente mit Fokus
  • :disabled, :checked gesperrte Elemente (zB. button), ausgew√§hlte Elemente (zB. checkbox)
  • :after, :before geben die M√∂glichkeit Inhalte um die Selektieren Elemente (vor bzw. nach dem Element) zu erzeugen

Benachbarter ("+" und "~") Selektor

Mit "+" wird nur das Element ausgewählt, dem das vorherige Element unmittelbar vorausgeht:

<ul> ...</ul><p>yellow</p>

ul + p {
   color: yellow;
}

Der "~" Selektor ist weniger strikt und wählt alle nachfolgenden Elemente eines bestimmten Knoten:

<ul> ...</ul><p>yellow</p><p>yellow</p><p>yellow</p>

Erstes Kind-Element ">" Selektor

Es wird nur das Element ausgew√§hlt, das ein erstes Kind-Element eines √ľbergeordnetes Element ist: <div><span> ... </span></div>

div > span { ... }

Attribut-Selektoren

Mit dem Attribut-Selektoren können alle Elemente gewählt werden, die diesen Attributen besitzen, zB:

a[title] { ... }

um alle Link-Elemente mit einem title auszuwählen.

Man kann auch den Wert des Attributs spezifizieren um die Selektion weiter einzuschränken. Zusätzlich ist es möglich mit einem "*" anzugeben, dass der gesuchte Wert an beliebiger Stelle in dem Wert des Attributs vorkommen kann. Mit "$" bzw. "^" kann man angeben, dass der Wert am Ende oder am Anfang des Attributwertes vorkommt:

a[title="Link-Title"] { ... }
a[title*="Title"] { ... }
a[href$=".png"] { ... }
a[href^="https"] { ... }

Negation Selektor

Ermöglicht die Auswahl aller Elemente, die nicht zu dem in den Klammern angegebenen Auswahlkriterium passen, zB.

p:not(#foobar) {
    font-weight: bold;
}

F√ľr alle Paragraph-Element au√üer einem mit der ID #foobar