CSS/Tutorials/Selektoren/einfacher Selektor
Text-Info
- 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[Bearbeiten]
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;
}
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.
Ein Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.
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.
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.
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[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.
<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.
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>
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.
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.
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]).
- 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.
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.
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]).
- 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.
case-Sensitivität[Bearbeiten]
Klassennamen und andere Attributwerte sind in HTML case-sensitiv. Das bedeutet, die Klassenbezeichner foo und Foo bezeichnen verschiedene Klassen.
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.
[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>
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.
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
h1, h2, h3 { font-family: sans-serif }
font-family auf den Wert sans-serif. Bei dem zweiten Beispiel handelt es sich um eine Selektor-Liste.Siehe auch[Bearbeiten]
- HTML/Tutorials/Links richtig gestalten
- 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
h1, der allen h1-Elementen die Textfarbe rot zuweist.Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren
h1undh2, die alle Überschriften vom Typ h1 und h2 anspricht.