Selector (CSS)
Ein CSS-Selector ist der Teil einer CSS-Regel, der beschreibt, auf welche Elemente in einem Dokument die Regel angewendet wird. Die übereinstimmenden Elemente erhalten den in der Regel angegebenen Stil.
Beispiel
Betrachten Sie dieses CSS:
p {
color: green;
}
div.warning {
width: 100%;
border: 2px solid yellow;
color: white;
background-color: darkred;
padding: 0.8em 0.8em 0.6em;
}
#customized {
font:
16px Lucida Grande,
Arial,
Helvetica,
sans-serif;
}
Die Selektoren hier sind "p"
(die die Farbe Grün auf den Text in jedem <p>
-Element anwenden), "div.warning"
(das jedes <div>
-Element mit der class "warning"
wie eine Warnbox aussehen lässt) und "#customized"
, das die Basis-Schriftart des Elements mit der ID "customized"
auf 16 Pixel hohe Lucida Grande oder eine der wenigen Alternativ-Schriftarten einstellt.
Wir können dann dieses CSS auf ein HTML anwenden, wie zum Beispiel:
<p>This is happy text.</p>
<div class="warning">
Be careful! There are wizards present, and they are quick to anger!
</div>
<div id="customized">
<p>This is happy text.</p>
<div class="warning">
Be careful! There are wizards present, and they are quick to anger!
</div>
</div>
Der resultierende Seiteninhalt wird folgendermaßen gestylt:
Siehe auch
-
Erfahren Sie mehr über CSS-Selektoren in unserer Einführung in CSS.
-
Grundlegende Selektoren
- Typ-Selektoren
elementname
- Klassen-Selektoren
.classname
- ID-Selektoren
#idname
- Universelle Selektoren
* ns|* *|*
- Attribut-Selektoren
[attr=value]
- Zustandsselektoren
a:active, a:visited
- Typ-Selektoren
-
Gruppierungsselektoren
- Selector-Liste
A, B
- Selector-Liste
-
Kombinatoren
- Nachbarselektoren
A + B
- Nachfolgende-Nachbarselektoren
A ~ B
- Kindselektoren
A > B
- Nachfahren-Selektoren
A B
- Nachbarselektoren
-
Pseudo