Welche CSS Selektoren gibt es, wie adressiere ich sie richtig?
In diesem Teil meines kleinen CSS-Kurses erkläre ich, welche (einfachen) Selektoren es gibt. Mit diesen Selektoren kannst du dann gezielt Elemente einzeln, gruppiert oder generell anpassen.
Wie du die Selektoren suchst und bearbeitest, diese Erläuterung folgt im nächsten Beitrag.
Kategorien der CSS Selektoren
Die CSS Selektoren lassen sich in fünf große Kategorien einteilen:
- einfache Selektoren
- kombinatorische Selektoren (basierend auf einer bestimmten Beziehung zwischen ihnen)
- Pseudo-Klasse Selektoren (basierend auf einem bestimmten Status bzw. Zustand)
- Pseudo-Elemente Selektoren (auswählen und bearbeiten eines Teils eines Elements)
- Attribute Selektoren (Auswahl basiert auf einem Attribut oder Attributwert).
Da es hier um Einsteigerinfos für CSS geht, betrachten wir nur die einfachen Selektoren.
Einfache CSS Selektoren – welche gibt es?
Zunächst eine kurze Auflistung, welche HTML-Elemente mit den einfachen Selektoren gezielt angesprochen werden können:
- name
- id
- class
- generisch (alle Elemente).
CSS Selektor für das Element: name
Um ein Element anzusprechen, genügt es, dies ohne die eckigen Klammern in CSS zu schreiben.
Mit diesem CSS-Code sprichst du zum Beispiel alle Elemente <p> an:
p {
color: green;
}
CSS Selektor für ein spezifisches Element: id
Mit dem id-Selektor gehst du auf exakt ein Element mit dieser (für deine Website) einzigartigen id ein. Sobald du die id für das von dir zu bearbeitende Element weißt, setze lediglich ein # vor die id und es kann losgehen.
Auch hier ein Beispiel für die id abc11:
#abc11 {
color:green;
}
CSS Selektor für eine bestimmte Klasse
Mit dem Klassen- (class) Selektor wählst du alle Elemente aus, die mit dieser Klasse ausgezeichnet wurden. Um sie anzusteuern, setze einen Punkt (.) vor die Klassenbezeichnung.
Das Beispiel:
.widget {
background-color: red;
}
CSS Selektor, um alle Elemente anzusprechen
Falls du zum Beispiel die Schriftfarbe für alle Elemente auf deiner Website ändern möchtest, so kannst du alle Elemente auf einmal auswählen. Dieser generische Selektor ist das Sternchen (*).
Und mein Beispiel hierfür:
* {
color: blue;
}
Die Gruppierung für gleichlautende Änderungen
Möchtest du für mehrere Elemente die gleichen Änderungen durchführen, so kannst du sie gruppieren. Die Vorteile sind klar: zum einen musst du weniger tippen, erneute Änderungen brauchst du nur ein Mal zu erfassen und es ist weniger Code vorhanden (Website ist schneller).
In diesem Beispiel änderst du für die Überschriften 1+2 die Schriftgröße sowie die Farbe:
h1, h2 {
font-size: 25px;
color: blue;
}
Weiter zu Teil 4
In diesem Beitrag hast du gesehen, welche Arten der einfachen CSS Selektoren es gibt. Im nächsten Beitrag erläutere ich, wie du diese Selektoren (bzw. die Elemente, die du ändern möchtest) identifizierst, damit du sie gezielt verändern kannst.
Hier geht es weiter zu Teil 4:
CSS Selektoren finden und bearbeiten
CSS-Kurs (WordPress) Inhaltsverzeichnis:
Und hier geht es zur Übersichtsseite für den kleinen CSS Einsteigerkurs.
Viel Erfolg mit deiner Website und CSS in WordPress!