CSS - Selektoren
Script
Der erste Teil einer CSS-Regel ist der Selektor, dort wird festgelegt für welche HTML-Elemente diese Regel vom Browser anzuwenden ist.
Selektor{
CSS-Eigenschaft: Wert;
}
Der einfachste Selektor ist der Typselektor, wir geben ein HTML-Element an für das eine Regel gelten soll. Z.B.: alle Abschnitte sollen einen Abstand zum nächsten Element haben, alle Haupttitel sollen rot dargestellt werden.
p{
margin-bottom: 12px;
}
h1{
color: red;
}
Wir können Element mit einer bestimmten Klasse ansprechen, das macht man mit einem Punkt vor dem Klassennamen.
.highlight{
font-weight:bold;
}
Elemente mit einer bestimmten ID, diese bekommt einen Hash vor dem Namen:
#cta{
font-size: 24px;
}
Typen, Klassen und IDs können kombiniert werden.
p.highlight{} /* Betrifft nur Paragraphen mit der Klasse hightlight */
.highlight.style2{} /* Betrifft nur Elemente die beide Klassen, sowohl "hightlight" als auch "style2" haben */
Nachfahren-Selektor
Oftmals möchte man nur Elemente in einem bestimmten Bereich der Seite stylen. Dafür gibt es den Nachfahren-Selektor, man schreibt zuerst das äussere Element das vorhanden sein muss damit eine Regel greift, dann das Element das gestylt wird.
Wer mit einer Regel nur Abschnitte in der rechten Spalte einer Website stylen möchte, kann der rechten Spalte eine Klasse "right" geben und dann folgende CSS-Anweisung schreiben.
.right p{
margin-bottom: 10px;
}
Man kann das beliebig weiter treiben.
body main article .top.first-part p{
}
Das ist ein gültiger Selektor. Sinnvoll sind solch komplexen Konstrukte aber eher weniger. Nach Möglichkeit sollte man sich kurz halten.
Pseudoklassen
Eine Element soll anders dargestellt werden, wenn jemand mit der Maus darüberfährt?
Dafür gibt es die Pseudoklasse :hover.
h1:hover{ border-bottom: 3px solid black; }
Für Links gibt es ausserdem noch :active (jemand drückt gerade auf den Link), :visited (diese Seite wurde schon besucht).
Weitere Selektoren
Man kann Elemente ansprechen die das direkte Kind eines anderen sind. Das ist bei verschachteltem HTML nützlich, wenn dasselbe Element auf mehrmals vorkommt.
li > a{}
Man kann Elemente ansprechen die direkt nach einem anderen kommen.
p + p{ margin-top: 12px; }
Es gibt einen globalen Selektor, der alle Elemente ansprecht, den Stern.
*{}
Ausserdem: man kann auch für mehrere Selektoren dieselben CSS-Regeln gelten lassen, man kombiniert diese mit einem Komma.
h1, h2, h3, h4, h5, h6{
font-family: Times;
}
Heisst: alle Titel werden mit dem Font Times dargestellt.
Wer ein Set aus Infoboxen erstellt, einige informieren, andere warnen, der möchte gewisse Styles die für alle Boxen gelten und andere die nur für bestimmte Boxen gelten.
.warning{
color: red;
}
.info{
color: green;
}
.warning, .info{
font-weight: bold;
padding: 12px;
}
Überblick
Einfach:
- Typselektor: p
- Klassenselektor: .first
- ID-Selektoren: #button
Kombinatoren
- Nachfahrenselektor: ul a
- Kindselektor: ul > a
- Nachbarselektor: p + p
Pseudoklassen
Und es gibt noch mehr! Wenn ihr regelmässig mit CSS arbeitet, lohnt sich zwischendurch ein Blick auf die Übersicht. Bald kann man mit dem neuen Wissen wieder etwas vereinfachen.
Hier eine vollständige Liste.