CSS/Tutorials/Selektoren/einfacher Selektor

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

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[Bearbeiten]

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

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
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.

Klassenselektor[Bearbeiten]

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.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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[Bearbeiten]

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: 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 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.

Umgang mit IDs, die spezielle Zeichen enthalten[Bearbeiten]

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[Bearbeiten]

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

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
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[Bearbeiten]

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[Bearbeiten]

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.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
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[Bearbeiten]

Attributselektoren erlauben es, Elemente nur dann anzusprechen, wenn das Attribut einen bestimmten Wert oder einen bestimmten Wertabschnitt besitzt.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Sie können Elemente ansprechen,

  • deren Attribut einen genau festgelegten Wert besitzt. Dazu wird innerhalb der eckigen Klammern des Selektors ein Gleichheitszeichen gefolgt von dem abzufragenden Wert notiert ([attributname=attributwert]).
  • deren Attribut eine Zeichenkette enthält, die durch Leerzeichen von anderen Bestandteilen des Attributwerts getrennt ist. Dazu notieren Sie den Attributselektor wie zuvor beschrieben und zusätzlich eine Tilde („~“) vor dem Gleichheitszeichen ([attributname~=attributwert]). Enthält der im Selektor angegebene Wert ein Leerzeichen, so spricht dieser Selektor kein Element an.
  • deren Attribut mit einer Zeichenkette beginnt, die durch den Bindestrich vom Rest des Attributwerts getrennt ist. Dazu notieren Sie den Attributselektor wie zuvor beschrieben, jedoch mit dem Verkettungszeichen („|“) vor dem Gleichheitszeichen ([attributname|=attributwert]).
Beachten Sie: Beginnt der im Selektor angegebene Wert mit einer Ziffer oder besteht aus anderen Zeichen als Buchstaben, Ziffern, Binde- und Unterstrich, so muss er innerhalb von einfachen oder doppelten Anführungszeichen notiert werden.
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.
Beachten Sie: In HTML gibt es Attribute, denen kein Wert zugewiesen werden muss, z.B. das checked-Attribut bei input-Elementen. Wird so einem Attribut kein Wert zugewiesen, erhält die DOM-Abbildung dieses Attributs automatisch eine leere Zeichenkette als Wert zugewiesen. Die Selektoren [checked=""], [checked~=""] und [checked|=""] würden daher das Element ansprechen.

Teilübereinstimmung[Bearbeiten]

Mit CSS3 wurde das Konzept der Attributselektoren erweitert.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

So können Sie Elemente ansprechen,

  • deren Attribut mit einer bestimmten Zeichenkette beginnt. Dazu wird innerhalb der eckigen Klammern des Selektors ein Zirkumflex gefolgt von einem Gleichheitszeichen gefolgt von dem abzufragenden Wert notiert ([attributname^=zeichenkette]).
  • deren Attribut mit einer bestimmten Zeichenkette endet. Dazu wird innerhalb der eckigen Klammern des Selektors ein Dollarzeichen gefolgt von einem Gleichheitszeichen gefolgt von dem abzufragenden Wert notiert ([attributname$=zeichenkette]).
  • deren Attribut eine bestimmte Zeichenkette enthält. Dazu wird innerhalb der eckigen Klammern des Selektors ein Asterisk gefolgt von einem Gleichheitszeichen gefolgt von dem abzufragenden Wert notiert ([attributname*=zeichenkette]).
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.

case-Sensitivität[Bearbeiten]

Klassennamen und andere Attributwerte sind in HTML case-sensitiv. Das bedeutet, die Klassenbezeichner foo und Foo bezeichnen verschiedene Klassen.

  • CSS 3.0
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

Sie können mithilfe eines Flags i in Attributselektoren die entsprechenden Elemente unabhängig von der gewählten Schreibweise der Attributwerte auswählen.

Beispiel ansehen …
[class="warning"]   { color: #c32e04; }
[class="warning" i] { background-color: #8a9da8; }
<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.

Folgende Attributselektoren können Sie in einer case-insensitiven Variante notieren

  • [attribut="wert" i], exakte Übereinstimmung (wert)
  • [attribut~="wert" i], Bestandteil durch Leerzeichen getrennt (wert foo)
  • [attribut|="wert" i], Bestandteil durch Bindestrich getrennt (wert-foo)
  • [attribut^="wert" i], Übereinstimmung am Anfang (wertfoo)
  • [attribut$="wert" i], Übereinstimmung am Ende (foowert)
  • [attribut*="wert" i], Übereinstimmung enthalten (foowertfoo)

Anwendung[Bearbeiten]

Verbundene Selektoren[Bearbeiten]

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[Bearbeiten]

Eine Selektor-Liste ist eine komma-separierte Liste von beliebigen Selektoren, auf welche dieselben CSS-Deklarationen angewendet werden sollen.

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.
Beachten Sie: Sobald ein Selektor der Liste fehlerhaft ist, werden die CSS-Deklarationen auf kein Element angewendet, selbst wenn die anderen Selektoren der Liste korrekt sind.

Siehe auch[Bearbeiten]