CSS/Tutorials/Selektoren/einfacher Selektor

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Selektoren(Weitergeleitet von Verbundener Selektor)
Wechseln zu: Navigation, Suche

Ein einfacher Selektor ist entweder der Universalselektor oder ein Typselektor. CSS kennt folgende einfache Selektoren:

Einfache Selektoren sind Universalselektor, Typselektor, Klassenselektor, ID-Selektor, Attributselektor und Pseudoklassen.

Typ-Selektor

Der Element- bzw. Typselektor besteht aus dem Namen des Elements, das angesprochen werden soll. Mit diesem Selektor werden alle Elemente eines Typs angesprochen.

Typselektor ansehen …
h1 { 
  color: red; 
}
h1, h2 { 
  background-color: #ccc;
  border-radius: .5em; 
}

Der erste Regelsatz besteht aus einem Selektor h1, der allen h1-Elementen die Textfarbe rot zuweist.

Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren h1 und h2, die alle Überschriften vom Typ h1 und h2 anspricht.

Beachten Sie: Bei der Gestaltung von XML-Dokumenten muss die Groß- und Kleinschreibung des Selektors mit der des anzusprechenden Elements übereinstimmen.

Der spezielle Typselektor * spricht alle Elemente an. Er ist von Bedeutung, wenn Kombinatoren zum Einsatz kommen.

Default-Typselektor 
* {
   outline: thin solid black;
}

Typselektoren können auch um eine Namensraum-Angabe erweitert werden. Näheres dazu finden Sie im Artikel zu CSS Namensräumen.

Klassenselektor

Ein Klassenselektor spricht Elemente an, die einer bestimmten Klasse zugehörend sind. Welche Elemente das sind, hängt von der verwendeten Auszeichnungssprache ab. In HTML-Dokumenten werden Klassen über das class-Attribut vergeben.

Ein Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Klassenselektor</title> <style> .beispiel {font-style: italic;} .beispiel.hinweis {color: green;} </style> </head> <body> <p class="beispiel">Dieser Absatz gehört zur Klasse <code>beispiel</code> und seine Schrift wird deshalb kursiv dargestellt.</p> <p class="beispiel hinweis">Dieser Absatz gehört sowohl zur Klasse <code>beispiel</code> als auch zur Klasse <code>hinweis</code> und sein Text wird deshalb grün und kursiv dargestellt.</p> <p class="hinweis">Dieser Absatz gehört nur zur Klasse <code>hinweis</code>. Für diese Klasse sind keine Styleangaben notiert.</p> </body> </html>

In diesem Beispiel wird der Text des ersten und zweiten Absatzes kursiv dargestellt, da beide Absätze zur Klasse „beispiel“ gehören. Klassenselektoren können mit anderen Selektoren verbunden werden, um genauer festzulegen, welche Elemente angesprochen werden sollen. Im Beispiel erhält der zweite Absatz eine grüne Schriftfarbe, da das Absatzelement sowohl der Klasse „beispiel“ als auch der Klasse „hinweis“ zugeordnet ist.

Sie können den Klassenselektor auch mit dem Typselektor verbinden, die Schreibweise lautet dann „elementname.klassenname“. Auf diese Weise sprechen Sie nur die Elemente an, bei denen Element- und Klassenname mit den Angaben des Selektors übereinstimmen. Die Kombination Universal- und Klassenselektor („*.klassenname“) ist ebenfalls möglich, aber identisch zur einfachen Schreibweise.

Beachten Sie:
  • .beispiel.hinweis selektiert Elemente, die der Klasse „beispiel“ und „hinweis“ angehören;
  • .beispiel, .hinweis selektiert Elemente, die der Klasse „beispiel“ oder „hinweis“ angehören (siehe von einander unabhängige Selektoren)
  • .beispiel .hinweis selektiert Elemente, die der Klasse „hinweis“ innerhalb der Klasse „beispiel“ angehören. (siehe Nachfahrenselektor).
Beachten Sie:
Klassennamen sollten nach ihrer Funktion (z.B. „Hinweis“) benannt werden und nicht nach den Formatierungen, die sie beinhalten. So stellen sie sicher, dass die Klasse auch nach einer Überarbeitung der Gestaltung noch nachvollziehbar den Bestandteilen eines Dokuments zugeordnet werden kann. Viele informelle Eigenschaften eines Elements können durch elementspezifische Attribute abgedeckt werden. CSS erlaubt das Ansprechen von Elementen anhand ihrer Attribute. Klassen und Klassenselektoren sollten Sie daher nur dann einsetzen, wenn keine andere Zuordnungsmöglichkeit besteht.

Es ist mithilfe des Klassenselektors nicht möglich, Elemente zu selektieren, die ausschließlich einer Klasse angehören. Dazu muss man auf Attributselektoren zurückgreifen.

  • .beispiel selektiert ein Element auch dann, wenn es neben der Klasse „beispiel“ noch weiteren Klassen angehört.
  • .beispiel ist aus CSS-Sicht identisch zu [class~="beispiel"]
  • [class="beispiel"] leistet das Verlangte.
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Klassenselektor</title> <style> .beispiel {font-style: italic;} .beispiel.hinweis {color: green;} [class="beispiel"] {border: 1px solid blue;} </style> </head> <body> <p class="beispiel">Dieser Absatz gehört zur Klasse <code>beispiel</code> und seine Schrift wird deshalb kursiv und mit blauem Rahmen dargestellt.</p> <p class="beispiel hinweis">Dieser Absatz gehört sowohl zur Klasse <code>beispiel</code> als auch zur Klasse <code>hinweis</code> und sein Text wird deshalb grün und kursiv, aber ohne Rahmen dargestellt.</p> <p class="hinweis">Dieser Absatz gehört nur zur Klasse <code>hinweis</code>. Für diese Klasse sind keine Styleangaben notiert.</p> </body> </html>

In diesem erweiterten Beispiel von oben wird der Text des ersten Absatzes zusätzlich blau umrandet dargestellt, da nur der erste Absatz ausschließlich zur Klasse „beispiel“ gehört.

ID-Selektor

Mit dem ID-Selektor kann ein Element angesprochen werden, dem eine ID mit dem id-Attribut zugeordnet wurde. Ein ID-Selektor wird gebildet, indem das Gatterzeichen „#“ vor den ID-Namen gestellt wird.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: ID-Selektor</title> <style> #beispiel { border: medium 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 ergibt 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.

Umgang mit IDs, die spezielle Zeichen enthalten

Aus Sicht von CSS ist eine ID ein CSS-Identifier und muss folgenden Regeln folgen:

  • Beginnt mit einem ASCII Buchstaben (A-Z, a-z)
  • Besteht im Übrigen aus den ASCII Zeichen a-z, A-Z, 0-9, "-" und "_", sowie allen Unicode-Zeichen ab U+0080.

Eine ID in HTML unterliegt wesentlich geringeren Einschränkungen. Während HTML 4 hier noch den Regeln von CSS ähnlich war, gibt es in HTML 5 fast gar keine Beschränkungen mehr, außer, dass eine ID kein Whitespace enthalten darf. Solche IDs können in CSS angesprochen werden, dafür müssen aber alle Zeichen, die die Regeln für CSS-Identifier verletzen, als CSS-Escape-Sequenz geschrieben werden.

Beispiel 
<style>

#\31 234 {
   color: red;
}

</style>
...
<p id="1234">Dieser Text erscheint rot.</p>

Universalselektor

Das Sternzeichen „*“ (der Asterisk) ist der Universalselektor. Mit ihm werden alle Elemente in einem Dokument angesprochen.

Beispiel ansehen …
<!doctype html> <html> <head> <title>CSS-Beispiel: Universalselektor</title> <style> * {border: 3px solid green;} </style> </head> <body> <p>Dieses Beispiel demonstriert die Wirkung des Universalselektors auf <abbr>HTML</abbr>-Dokumente.</p> </body> </html>

Zeigt ein Browser obiges Dokument an, so wird um die Elemente html, body, p und abbr ein grüner Rahmen gezeichnet. Das Element head und seine Kindelemente werden aufgrund ihrer speziellen Eigenschaften in HTML überhaupt nicht angezeigt.


In Verbindung mit anderen Selektoren ist der Universalselektor oft überflüssig. Auch erhöht er nicht die Spezifität des Selektors.

Beispiel 
*.class    /* identisch mit .class */
*#id       /* identisch mit #id    */
*:hover    /* identisch mit :hover */

Der Universalselektor muss bei einer solchen Verwendung immer als erstes aufgeführt werden.

Beachten Sie: Der nachfolgende Code ist fehlerhaft.
(fehlerhafter Code) 
.class* {  }
Korrekt wäre *.class.

Notwendig wird er hingegen, wenn Sie einen Selektor benötigen, der auf der Struktur der Webseite aufbaut. Beispielsweise kann der Wunsch bestehen Linkelemente, die sich in einem Textauszeichnungselement innerhalb von Absätzen befinden (quasi Enkel der Absätze), anders zu formatieren.

Beispiel ansehen …
p a       { color: blue; }
P * a     { background: silver; }
p > * > a { border: 2px solid red; }

<p>
  Dieser Textabsatz enthält ein 
  <a href="#">Linkelement (Kind des Absatzes)</a>. 
  In einem 
  <span>Spanelement befindet sich ein 
    <a href="#">weiterer Link</a>. Er ist ein Enkelkind des Absatzes.
  </span> 
  <small>Small-Elemente enthalten nebensächliche Informationen. 
    <span>Auch in ihnen können sich
      <span>weitere Elemente mit noch 
        <a href="#">tiefer verschachtelten Links</a>
      </span> befinden.
    </span>
  </small>
</p>

Alle Verweise innerhalb von Textabsätzen werden in blauer Schrift dargestellt; diejenigen, die mindestens Enkelkind sind, erhalten einen grauen Hintergrund; die Enkelkinder zudem einen roten Rahmen.

Siehe auch

Attributselektor

Seit CSS Level 2 gibt es Selektoren, die Elemente anhand ihrer Attribute ansprechen können. Die verschiedenen Attributselektoren werden nachfolgend beschrieben.

In HTML und einigen XML-Formaten gibt es Attribute, deren Wert vordefiniert ist. Beachten Sie, dass sowohl HTML- als auch XML-Parser diese Attribute und ihre Werte nicht zwingend in den DOM-Elementbaum einarbeiten müssen. Beziehen Sie daher Attributselektoren nur auf Attribute, die Sie im Quelltext notiert haben.

Attributspräsenz

Ein Element, das ein bestimmtes Attribut besitzt, kann durch den einfachen Attributselektor angesprochen werden. Ein Attributselektor wird gebildet, indem eckige Klammern („[“ und „]“) um den Namen des Attributs gesetzt werden.

Beachten Sie: Ob die Groß- und Kleinschreibung des Attributnamens beachtet wird, hängt davon ab, ob Sie CSS für HTML oder für XML verwenden. Bei HTML wird sie nicht beachtet, bei XML (z. B. in SVG-Dokumenten) hingegen schon.
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Attributselektor</title> <style> [title] {border: 3px solid green;} </style> </head> <body> <h1>Wirkung des einfachen Attributselektors</h1> <ul title="Linkliste"> <li><a href="http://www.example.org/">Beispielverweis</a></li> <li><a href="http://www.example.net/">Beispielverweis</a></li> <li><a title="Beispiel">Beispielverweis</a></li> </ul> </body> </html>

In diesem Beispiel erhalten nur das letzte Element der Liste und die Liste selbst einen grünen Rahmen, da beide über ein title-Attribut verfügen. Der Attributwert spielt für den einfachen Attributselektor keine Rolle.


Attributselektoren können mit anderen Selektoren verbunden werden:

  • Mit dem Universalselektor: *[attributname] – diese Schreibweise ist zu der Schreibweise ohne Universalselektor identisch.
  • Mit dem Elementselektor: elementname[attributname]
  • Mit Klassenselektoren: .klassenname[attributname]
  • Mit dem ID-Selektor: #id[attributname]

Selektion nach Wert

Attributselektoren erlauben es auch, nur diejenigen Elemente auszuwählen, bei denen ein Attribut einen bestimmten Wert oder einen bestimmten Wertabschnitt besitzt.

Dafür erweitern Sie die einfache Präsenzabfrage um einen Vergleichsoperator und den Vergleichswert.

Beachten Sie:
  • Der Vergleichswert muss entweder in Anführungszeichen gesetzt werden, oder den CSS-Namensregeln entsprechen. Wenn Sie sich unsicher sind, setzen Sie einfach immer Anführungszeichen.
  • Ob die Groß- und Kleinschreibung des Attributwertes beachtet wird, hängt vom abgefragten Attribut ab. Die HTML Spezifikation listet diejenigen Attribute auf, bei denen die Schreibung nicht beachtet wird.[1] Dies sind typischerweise Attribute, deren Werte Schlüsselwörter darstellen. Bei allen anderen Attributen wird die Schreibung beachtet (z. B. id, class oder role).
[name=wert] - vollständige Übereinstimmung
trifft nur auf diejenigen Elemente zu, deren Attribut exakt den angegebenen Wert hat.
[name~=wert] - Wert ist Teil einer durch Leerzeichen separierten Liste
trifft zu, wenn der genannte Wert Teil der Werteliste im Attribut name ist. Die Einträge dieser Liste müssen durch Leerzeichen getrennt sein. Ein Beispiel für ein solches Listenattribut ist class (wobei man Klassen natürlich besser mit dem Klassenselektor abfragt).
[name|=wert] - Übereinstimmung bis zum ersten --Zeichen
Der Selektor verhält sich ähnlich wie [name=wert], der Vergleich geht aber nur bis zum ersten --Zeichen im Attributwert. Ist kein --Zeichen enthalten, wird vollständig verglichen. Diese Art der Abfrage bietet sich beispielsweise für Sprachcodes (de-at) an.
[name^=wert] - Übereinstimmung mit dem Anfang des Attributwerts
trifft zu, wenn der Attributwert mit dem angegebenen Wert beginnt
[name$=wert] - Übereinstimmung mit dem Ende des Attributwerts
trifft zu, wenn der Attributwert mit dem angegebenen Wert endet
[name*=wert] - Übereinstimmung mit einem Teil des Attributwerts
trifft zu, wenn der Attributwert den angegebenen Wert an einer beliebigen Stelle enthält
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Attributselektor</title> <style> [type=submit] {font-weight: bold;} [title~=Berlin] {color: green;} [hreflang|=de] {font-style: italic;} </style> </head> <body> <!-- 1. --> <h1>Der [attribut=wert]-Selektor</h1> <p><input type="text" value="Beispiel"> <input type="submit" value="Absenden"></p> <!-- 2. --> <h1>Der [attribut~=wert]-Selektor</h1> <ul> <li title="Berlin: eine schöne Stadt">Viele Informationen.</li> <li title="Die Stadt Berlin besteht aus mehreren Stadteilen">Mehr Informationen.</li> <li title="Das Brandenburger Tor steht in Berlin">Noch mehr Informationen.</li> </ul> <!-- 3. --> <h1>Der [attribut|=wert]-Selektor</h1> <ul> <li><a href="http://www.example.org/" hreflang="de">Beispielverweis</a></li> <li><a href="http://www.example.com/" hreflang="de-at">Beispielverweis</a></li> <li><a href="http://www.example.net/" hreflang="en-de">Beispielverweis</a></li> </ul> </body> </html>
  1. Nur das type-Attribut des „Absenden“-Knopfes besitzt genau den Wert „submit“. Dadurch wird die Schrift des Elements fett formatiert.
  2. Der zweite und der dritte Listenpunkt werden mit einer grünen Schriftfarbe dargestellt. Der erste Listenpunkt wird nicht formatiert, da das Wort „Berlin“ nicht durch ein Leerzeichen vom restlichen Attributwert getrennt wird.
  3. Die Schrift des ersten und des zweiten Verweises werden kursiv formatiert. Der Selektor funktioniert nur, wenn der festgelegte Wert am Anfang des Attributwertes vorkommt.
Teilübereinstimmungen ansehen …
<ul> <li><a href="https://example.com/">Beispiellink</a></li> <li><a href="https://example.com/example.pdf">Ein PDF-Dokument</a></li> <li><a href="https://wiki.selfhtml.org/">Das selfhtml wiki</a></li> <li><a href="http://example.org/WIKI/example.pdf/">kein Selektor darf diesen Link stylen.</a></li> </ul>
a[href^="https://"] { font-weight: bold } a[href$=".pdf"] { color: green } a[href*="wiki"] { font-style: italic }
  1. Der erste Link wird fett formatiert, denn seine hypertext reference beginnt mit https://.
  2. Die Linkbeschriftung wird fett und grün formatiert, denn das href-Attribut beginnt mit https:// und endet mit .pdf.
  3. Die Linkbeschriftung wird fett und kursiv formatiert, denn das href-Attribut beginnt mit https:// und enthält wiki.


Beachten Sie: Geben Sie als Wert innerhalb dieser Selektoren die leere Zeichenkette an (z. B. [attribut*=""]), spricht der Selektor kein Element an.
Beachten Sie:
  • In HTML gibt es die booleschen Attribute, denen kein Wert zugewiesen werden muss, z. B. das checked-Attribut bei input-Elementen. Fragen Sie solche Attribute nicht auf einen Wert ab, prüfen Sie nur auf Attributpräsenz!
  • Ein boolsches Attribut stellt nicht immer den aktuellen Zustand eines Elements dar. Wenn Sie einer Checkbox das Attribut checked geben, dann bleibt das Attribut erhalten, auch wenn Sie die Checkbox abwählen. Den checked-Zustand müssen Sie mit der Pseudoklasse :checked abfragen. In einem <details>-Element stellt das open-Attribut hingegen dar, ob das Element aufgeklappt ist oder nicht.

case-Sensitivität

Wie schon erwähnt, ist für bestimmte Attributwerte in HTML die Groß- und Kleinschreibung relevant (case-sensitiv). Beispielsweise bezeichnen die Klassennamen foo und Foo bezeichnen verschieden Klassen.

Browserunterstützung
caniuse.com

Sie können in Attributselektoren mithilfe des Flags i oder s festlegen, ob der Vergleich des Attributwertes – unabhängig von den Vorgaben des jeweiligen Attributes – unter Beachtung der Schreibweise stattfinden soll oder nicht. Den zu vergleichenden Attributwert müssen Sie dann in Anfüh

Beachten Sie: Diese Flags wirken nur auf den ASCII-Zeichensatz, also a-z und A-Z. Akzentzeichen und Umlaute sind außerhalb des ASCII-Bereichs und werden stets case-sensitiv verglichen.
Beispiel ansehen …
[class="warning"] { 
  color: red;
}
[class="warning" i] {
  background-color: lightgray; 
}

<div class="warning">warning</div>
<div class="Warning">Warning</div>
<div class="WARNING">WARNING</div>

Nur im ersten div-Element ist die Schriftfarbe rot, weil nur dieses der Klasse warning angehört. Alle div-Elemente hingegen haben einen grauen Hintergrund.

Die i- und s-Flags könnnen Sie in allen Attributwertselektoren verwenden.

Anwendung

Verbundene Selektoren

Ein verbundener Selektor ist eine Kette von einfachen Selektoren, die nicht mit Hilfe eines Kombinators verkettet wurden. Verbundene Selektoren beginnen immer mit einem Typselektor oder dem Universalselektor, wobei der Universalselektor auch impliziert sein kann. Zum Beispiel ist in .class[attribute] der Universalselektor implizit vorhanden: *.class[attribute]

Im weiteren Verlauf der Kette ist kein weiterer Typ- oder Universal-Selektor erlaubt.

Selektor-Listen

Eine Selektor-Liste ist eine komma-separierte Liste von beliebigen Selektoren. Die Selektorliste trifft auf ein Element zu, wenn mindestens einer der darin enthaltenen Selektoren auf das Element zutrifft.

Beispiel 
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

h1, h2, h3 { font-family: sans-serif }

Beide Beispiele setzen für die Überschriften 1., 2. und 3. Ordnung die Eigenschaft font-family auf den Wert sans-serif. Bei dem zweiten Beispiel handelt es sich um eine Selektor-Liste.

Dabei muss zwischen einer Selektor-Liste und einer fehlertoleranten Selektor-Liste (forgiving selector list) unterschieden werden. Wenn einer der Selektoren in einer Selektor-Liste fehlerhaft ist, gilt die ganze Liste als fehlerhaft und trifft auf kein Element mehr zu. Einige Stellen in CSS definieren jedoch eine fehlertolerante Selektor-Liste (beispielsweise :is(), :has() oder die of S-Erweiterung der indexbasierenden Pseudoklassen). Wenn eine fehlertolerante Selektorliste einen fehlerhaften Selektor enthält, wird der fehlerhafte Selektor ignoriert und die übrigen weiterhin angewendet.

Siehe auch

  • ↑ WHATWG HTML Spezifikation: Attribute, bei denen die Schreibung des Wertes nicht beachtet wird
    • Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Selektoren/einfacher_Selektor&oldid=96683#Verbundene_Selektoren“