CSS/Selektoren/ID-Selektor

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit dem ID-Selektor kann ein Element angesprochen werden, dem eine ID zugeordnet wurde. Wie einem Element eine ID zugeordnet wird, ist von der Auszeichnungssprache abhängig. In HTML- und XHTML-Dokumenten handelt es sich dabei um das id-Attribut. Ein ID-Selektor wird gebildet, indem das Gatterzeichen „#“ vor den ID-Namen gestellt wird.

  • CSS 1.0
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: ID-Selektor</title> <style> #beispiel {border: 3px solid green;} </style> </head> <body> <div id="beispiel"> <h1>ID-Selektoren</h1> <p>Dieses Beispiel demonstriert die Wirkung des ID-Selektors.</p> </div> </body> </html>
In diesem Beispiel erhält das gruppierende div-Element die ID „beispiel“. Die CSS-Regel bewirkt, dass um dieses Element ein grüner Rahmen dargestellt wird.

ID-Selektoren können mit anderen Selektoren verbunden werden:

  • Mit dem Universalselektor: *#id - diese Schreibweise ist zu der Schreibweise ohne Universalselektor identisch.
  • Mit Elementselektoren: elementname#id
  • Mit Klassenselektoren: .klassenname#id bzw. #id.klassenname
Beachten Sie: Eine ID darf in einem Dokument nur ein einziges Mal vorkommen, die Kombination des ID-Selektors mit anderen Selektoren macht also nur dann Sinn, wenn Sie die entsprechende ID in mehreren Dokumenten und in unterschiedlichen Situationen einsetzen. Welches Attribut als ID erkannt wird, hängt bei XML-Dokumenten von der DTD ab. Da ein XML-Parser eine DTD nicht verarbeiten muss, kann bei dem Browser unbekannten XML-Formaten nicht garantiert werden, dass die CSS-Eigenschaften angewendet werden.