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:

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:

html
<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