IT-Kurs CSS-Grundlagen 020_Selektoren

Selektoren

Selektoren werden verwendet, um Elemente im Dokument auszuwählen, die gestaltet werden sollen. Durch verschiedene Auswahlmodi wird dem Browser mitgeteilt, welche Elemente welche Stile erhalten.

ID-Selektor (#)

Wählt ein Element anhand seiner eindeutigen ID aus. Der ID-Selektor sollte im Dokument einzigartig sein und nicht wiederverwendet werden.

Beispiel:

1
#myID {
2
  /* Stilregeln */
3
}

Klassen-Selektor (.)

Wählt Elemente anhand ihres Klassennamens aus. Klassen-Selektoren können für mehrere Elemente verwendet werden, und ein Element kann mehrere Klassen haben.

Beispiel:

1
.myClass {
2
  /* Stilregeln */
3
}

Element-Selektor (p, h1)

Wählt Elemente anhand ihres HTML-Elementnamens aus. Der Element-Selektor wählt alle passenden Elemente im Dokument aus.

Beispiel:

1
p {
2
  /* Stilregeln */
3
}

Universalselektor (*)

Wählt alle Elemente im Dokument aus. Der Universalselektor sollte mit Vorsicht verwendet werden, da er alle Elemente erfasst und die Leistung beeinträchtigen kann.

Beispiel:

1
* {
2
  /* Stilregeln */
3
}

Attributselektor ([type="text"])

Wählt Elemente anhand ihrer Attributwerte aus. Attributselektoren können Elemente basierend auf verschiedenen Attributwerten auswählen.

Beispiel:

1
input[type="text"] {
2
  /* Stilregeln */
3
}

Pseudoklassen-Selektor

Wählt besondere Zustände oder Positionen von Elementen aus. Pseudoklassen-Selektoren werden für Interaktionszustände wie Hover, Besuch usw. verwendet.

Beispiel:

1
a:hover {
2
  /* Stilregeln */
3
}

Pseudoelement-Selektor

Wählt besondere Teile von Elementen aus. Pseudoelement-Selektoren wählen virtuelle Teile von Elementen wie die erste Zeile, den ersten Buchstaben usw.

Beispiel:

1
p::first-line {
2
  /* Stilregeln */
3
}

Kind-Selektor

Wählt direkte Kindelemente eines Elements aus. Der Kind-Selektor wählt nur direkte Kindelemente, keine Nachfahren.

Beispiel:

1
ul > li {
2
  /* Stilregeln */
3
}

Allgemeiner Geschwister-Selektor

Wählt alle Geschwisterelemente mit demselben Elternelement aus. Der allgemeine Geschwister-Selektor wählt alle Geschwisterelemente nach dem angegebenen Element, ohne direkte Nachbarschaft zu erfordern.

Beispiel:

1
h2 ~ p {
2
  /* Stilregeln */
3
}

Benachbarter Geschwister-Selektor

Wählt das direkt nach dem angegebenen Element folgende Geschwisterelement aus.

Beispiel:

1
h2 + p {
2
  /* Stilregeln */
3
}

Nachfahren-Selektor

Wählt alle Nachfahrenelemente unter einem Element aus. Der Nachfahren-Selektor wählt alle Nachfahren einschließlich tief verschachtelter Elemente.

Beispiel:

1
div p {
2
  /* Stilregeln */
3
}

Vereinigungsselektor (,)

Kombiniert mehrere Selektoren und wählt alle Elemente aus, die einem der Selektoren entsprechen. Der Vereinigungsselektor wird verwendet, um mehrere verschiedene Elementtypen gleichzeitig auszuwählen und dieselben Stilregeln anzuwenden.

Beispiel:

1
h1, h2, h3 {
2
  /* Stilregeln */
3
}

Selektorliste

Listet mehrere Selektoren nach Priorität auf und wählt den am besten passenden aus. Selektorlisten ermöglichen die Auswahl mehrerer Elemente nach verschiedenen Selektorkombinationen.

Beispiel:

1
div p,
2
.myClass,
3
#myID {
4
  /* Stilregeln */
5
}

Benennungsregeln für Selektoren

• Selektornamen müssen aus Buchstaben, Zahlen, Unterstrichen oder Bindestrichen bestehen.

• Selektornamen müssen mit einem Buchstaben oder Unterstrich beginnen.

• Selektornamen dürfen nicht mit einer Zahl beginnen.

• Selektornamen dürfen keine Leerzeichen enthalten.

  Empfehlungen:

• Verwenden Sie aussagekräftige Namen: Selektornamen sollten die Funktion oder den Zweck des ausgewählten Elements klar widerspiegeln.

• Befolgen Sie Namenskonventionen: Verwenden Sie einheitliche Namenskonventionen wie CamelCase oder Bindestrich-Schreibweise für konsistenten Code.

• Vermeiden Sie bedeutungslose Abkürzungen: Vermeiden Sie zu kurze oder bedeutungslose Abkürzungen, damit andere Entwickler die Bedeutung verstehen können.

• Befolgen Sie semantische Benennung: Verwenden Sie semantische Selektoren für bessere Lesbarkeit und Wartbarkeit des Codes.