Selektor (CSS)

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",
    "Helvetica",
    "Arial",
    sans-serif;
}

Die Selektoren hier sind "p" (welcher die Farbe Grün auf den Text innerhalb eines <p>-Elements anwendet), "div.warning" (welches jedes <div>-Element mit der class "warning" wie ein Warnfeld aussehen lässt), und "#customized", welches die Basis-Schriftart des Elements mit der ID "customized" auf eine 16-Pixel hohe Lucida Grande oder eine der anderen angegebenen Ersatzschriften setzt.

Wir können dieses CSS dann auf etwas 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

  • Elementselektoren elementname
  • Klassenselektoren .classname
  • ID-Selektoren #idname
  • Universalselektoren * ns|* *|*
  • Attributselektoren [attr=value]
  • Zustandsselektoren a:active, a:visited

• Gruppierungsselektoren

  • Selektorenliste A, B

• Kombinatoren

  • Selektoren für direkte Nachfolger A + B
  • Selektoren für nachfolgende Geschwister A ~ B
  • Kindselektoren A > B
  • Nachfahrenselektoren A B

• Pseudo

  • Pseudoklassen :
  • Pseudoelemente ::