CSS/Tutorials/Selektoren/einfacher Selektor
- 30min
- mittel
- 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.
Inhaltsverzeichnis
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.
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.
Der spezielle Typselektor * spricht alle Elemente an. Er ist von Bedeutung, wenn Kombinatoren zum Einsatz kommen.
* {
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.
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.
.beispiel.hinweisselektiert Elemente, die der Klasse „beispiel“ und „hinweis“ angehören;.beispiel, .hinweisselektiert Elemente, die der Klasse „beispiel“ oder „hinweis“ angehören (siehe von einander unabhängige Selektoren).beispiel .hinweisselektiert Elemente, die der Klasse „hinweis“ innerhalb der Klasse „beispiel“ angehören. (siehe Nachfahrenselektor).
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.
-
.beispielselektiert ein Element auch dann, wenn es neben der Klasse „beispiel“ noch weiteren Klassen angehört. -
.beispielist aus CSS-Sicht identisch zu[class~="beispiel"] -
[class="beispiel"]leistet das Verlangte.
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.
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
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.
<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.
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.
*.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.
.class* { }
*.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.
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.
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.
- 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
nameist. Die Einträge dieser Liste müssen durch Leerzeichen getrennt sein. Ein Beispiel für ein solches Listenattribut istclass(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
- Nur das
type-Attribut des „Absenden“-Knopfes besitzt genau den Wert „submit“. Dadurch wird die Schrift des Elements fett formatiert. - 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.
- Die Schrift des ersten und des zweiten Verweises werden kursiv formatiert. Der Selektor funktioniert nur, wenn der festgelegte Wert am Anfang des Attributwertes vorkommt.
- Der erste Link wird fett formatiert, denn seine hypertext reference beginnt mit https://.
- Die Linkbeschriftung wird fett und grün formatiert, denn das
href-Attribut beginnt mit https:// und endet mit .pdf. - Die Linkbeschriftung wird fett und kursiv formatiert, denn das
href-Attribut beginnt mit https:// und enthält wiki.
- In HTML gibt es die booleschen Attribute, denen kein Wert zugewiesen werden muss, z. B. das
checked-Attribut beiinput-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
checkedgeben, dann bleibt das Attribut erhalten, auch wenn Sie die Checkbox abwählen. Den checked-Zustand müssen Sie mit der Pseudoklasse:checkedabfragen. In einem<details>-Element stellt dasopen-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.
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
[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.
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
- HTML/Tutorials/Links
- SELF-Forum: CSS größer und kleiner Selektor bei Attributen von Gunnar Bittersmann von 25.09.2020
maxlength mit dem Teilübereinstimmungs-Selektor auslesen und input-Feld entsprechend stylen
