Selector (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" (der die Farbe Grün auf den Text innerhalb eines <p>-Elements anwendet), "div.warning" (der ein <div>-Element mit der class "warning" wie ein Warnfeld aussehen lässt), und "#customized", der die Basis-Schriftart des Elements mit der ID "customized" auf 16 Pixel große Lucida Grande oder eine der wenigen Ersatzschriftarten setzt.

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

• Mehr über CSS-Selektoren erfahren in unserer Einführung in CSS.

• Grundlegende Selektoren

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

• Gruppierungsselektoren

  • Selektorliste A, B

• Kombinatoren

  • Nachbarselektoren A + B
  • Folgeschwesterselektoren A ~ B
  • Kindselektoren A > B
  • Nachkommenselektoren A B

• Pseudo

  • Pseudoklassen :
  • Pseudoelemente ::