====== LU01c - Element-, Klasse-, ID-CSS-Selektoren ====== ~~NOTOC~~ ===== Arten von Selektoren ===== Ziel der verschiedenen Arten von Selektoren, die teilweise komplex verschachtelten HTML-Code zu erreichen (zu matchen), damit genau der beabsichtigte HTML-Abschnitt gestyled wird. Dazu können Selektoren auch kombiniert werden. ===== Kombinieren von Selektoren ===== In CSS können Sie verschiedene Selektoren in vielfältiger Weise kombinieren, um sehr spezifische Elemente auf einer Webseite anzusprechen. Hier sind einige der häufigsten Kombinationen: ==== 1. Nachfahrenselektor: ==== Der Nachfahrenselektor (auch bekannt als Leerzeichen-Selektor) wählt Elemente aus, die Nachkommen eines bestimmten Elements sind. Zum Beispiel wählt ''div p'' alle ''

'' Elemente aus, die sich innerhalb eines ''<%%div%%>'' Elements befinden. div p { color: red; } ==== 2. Kindselektor: ==== Der Kindselektor (''>'') wählt Elemente aus, die direkte Kinder eines bestimmten Elements sind. Im Gegensatz zum Nachfahrenselektor wählt ''div > p'' nur die ''

'' Elemente aus, die direkte Kinder eines ''%%<%%div%%>%%'' Elements sind (also nicht tiefer liegende ''

'' Elemente). div > p { color: blue; } ==== 3. Nachfolgerselektor:==== Der Nachfolgerselektor (''+'') wählt das Element aus, das unmittelbar auf ein bestimmtes Element folgt. Zum Beispiel wählt ''h1 + p'' ein ''

'' Element aus, das unmittelbar auf ein ''

'' Element folgt. `h1 + p { font-size: 18px; }` ==== 4. Geschwisterselektor:==== Der Geschwisterselektor (''~'') ist ähnlich wie der Nachfolgerselektor, wählt aber alle nachfolgenden Geschwisterelemente aus, nicht nur das unmittelbar folgende. Zum Beispiel wählt ''h1 ~ p'' alle ''
'' Elemente aus, die auf dasselbe Elternelement folgen wie das ''

'' Element. `h1 ~ p { font-size: 18px; }` ==== 5. Gruppenselektor: ==== Der Gruppenselektor ('','') ermöglicht es Ihnen, die gleichen Stile auf verschiedene Elemente anzuwenden. Zum Beispiel wendet ''h1, h2, p'' die Stile auf alle ''

'', ''

'' und ''
'' Elemente an. `h1, h2, p { color: green; }` Es ist auch möglich, diese Selektoren zu kombinieren und zu verschachteln, um sehr spezifische Auswahlkriterien zu erstellen. Durch das Erlernen dieser Kombinationen können Sie sehr präzise bei der Anwendung Ihrer CSS-Stile sein. ===== Übersicht der einfachen CSS-Selektoren ===== ^ Selektor ^ Bezeichnung ^ Auswahl ^ HTML-Beispiel ^ | ''element {...}'' | Typselektor | HTML-Element mit dem Namen //element// |''
'' | | ''.klname'' | Klassenselektor | Element mit der Klasse //klname// |''
'' | | ''#elemid'' | ID-Selektor | Element mit der ID //elemid// |''
'' | ===== Typselektor ===== Der Typselektor (alias Elementselektor) spricht die HTML-Elemente direkt mit dem Elementnamen an. Angewendet wird diese Regel auf alle Elemente desselben Typs im HTML-Dokument. Dabei ist es irrelevant, an welcher Stelle im HTML-Dokument diese Elemente geschrieben sind, welcher Klasse diese zugehören oder welchen Bezeichner sie haben. ==== Beispiel ==== Bei den HTML-Elementen ''
'', ''
'' und ''
'' wird der Text zentriert ausgerichtet und ein schwarzer Rahmen von 1 Pixel Dicke gezogen. Der Abstand zum oberen nächsten Element beträgt bei diesen Elementen immer 5 Pixel. Alle HTML-Elemente ''
'' und '''' werden in grauer Farbe angezeigt. Jedes HTML-Element ''
'' bekommt einen grauen gepunkteten Rahmen. |`/* Schwarzer Rahmen, Zentrierter Text, 5 Pixel Abstand von oben / header, nav, footer { text-align:center; border: 1px solid black; margin-top: 5px; } / Grauer Text / h1, abbr { color: gray; } / Grauer gepunkteter Rahmen / p { border: 1px dotted gray; }`|`Typselektoren`
`Kopfzeile`
`Navigation Typselektoren Ein solcher Typselektor spricht die HTML-Elemente mit dem Elementnamen direkt an. Bei XML-Dokumenten muss auf die Groß- und Kleinschreibung des Selektors und dem anzusprechenden Element geachtet werden. Fußzeile` [[https://jsfiddle.net/eoaf48yw/|Live Preview]]| ===== Klassenselektor ===== Mit dem Klassenselektor werden HTML-Elemente gewählt, die zu einer bestimmten Klasse gehören. Ein bestimmten Klassennamen wird mit dem globalen HTML-Attribut ''class'' für (fast) alle Elemente vergeben. Das HTML-Element ''
'' wird mit dem Klassennamen '''' selektiert, indem der Klassenname mit einem Punkt getrennt (ohne Leerzeichen) direkt hinter den Typselektor gesetzt wird. HTML-Code:
`Ein Absatztext ...`
CSS-Code nur auf p-HTML-Elemente anwendbar: `p.hinweis { color: red; }` oder CSS-Code auf jedes HTML-Elemente anwendbar: `.hinweis { color: red; }` HTML-Elemente können auch mehrere Klassen auf einmal verwenden. Hier werden dem p-Element die beiden Klassen hinweis und bigfont zugewiesen. `...` ==== Beispiel 1==== Nun ein einfaches HTML-Dokument, das diese Klassenselektoren verwendet und deren Anwendung demonstriert: Der erste Absatz mit dem p-Element verwendet keine Klasse, weshalb hier nur der Typselektor p mit der Anpassung der Schriftfamilie darauf angewendet wird. Dieselbe Schriftfamilie wird auch bei den anderen vier Absätzen verwendet. * Der zweite Absatz wird mit dem Klassenselektor ''p.hinweis'' formatiert, wo der Absatz von links um 50 Pixel eingerückt und ebenfalls links ein grüner Rand mit 10 Pixeln hinzugefügt wird. Der Abstand zu diesem Rand beträgt 5 Pixel. * Der dritte Absatz verwendet den Klassenselektor ''p.hinweis.warnung'', wo alles recht ähnlich formatiert wird wie im zweiten Absatz. * Der vierte Absatz mit der Klasse ''warnung'' wird nicht formatiert, weil für diese Klasse keine Stilangaben notiert wurden. Wollen Sie für diesen vierten Absatz mit der Klasse ''warnung'' eine CSS-Regel mit einem Klassenselektor definieren, müssten Sie diese wie folgt notieren: |/* Datei: style.css / / Schwarzer Rahmen, Zentrierter Text, 5 Pixel Abstand von oben / header, nav, footer { text-align:center; border: 1px solid black; margin-top: 5px; padding: 5px; font-family: Verdana, Arial; } / Grauer Text / h1, abbr { color: gray; font-family: Verdana, Arial; } / Schriftfamilie für p-Elemente / p { font-family: Verdana, Arial; } / Absatztext für einen Hinweis / p.hinweis { margin-left: 50px; border-left: 10px solid green; padding-left: 5px; } / Absatztext für einen Hinweis als Warnung / p.hinweis.warnung { border-left: 10px solid red; border-top: 2px solid red; border-right: 10px solid red; border-bottom: 2px solid red; text-align: center; } / Schriftgröße auf 140% Hintergrundfarbe auf grau / .kopffuss { font-size: 140%; background: #f5f5f5; } / Schriftgröße auf 130% / .bigfont { font-size: 130%; } .warnung { color: blue; }|Klassenselektor Kopfzeile Navigation Klassenselektor Das p-Element ohne einer Klasse. Das p-Element mit der Klasse hinweis. Das p-Element mit den Klassen hinweis warnung. Das p-Element mit der Klasse warnung. Das p-Element mit den Klassen hinweis bigfont. Fußzeile [[https://jsfiddle.net/527sxmcf/|Live Preview]]| ===== ID-Selektor ===== Mit dem ID-Selektor werden HTML-Elemente gewählt, welche eine bestimmte ID (anhand des ''id''-Attributs) zugeordnet haben. Im Gegensatz zu Klassen sind IDs ''immer einzigartige'' Elemente in einem HTML-Dokument. Es darf nur einem Element im gesamten HTML-Dokument diese ID zugewiesen werden. Ein solcher ID-Selektor wird mit dem Rautenzeichen (oder Gatterzeichen – ''#''), gefolgt von der ID notiert. Der ID-Selektor für ''%%<%%div id="special">'' kann daher wie folgt notiert werden: div#special oder nur special Der Vorteil von ''elementname#id'' im Gegensatz zu ''#id'' kann eventuelle Versehen desselben id-Attributwert vorbeugen. Eine ''Validierung'' deckt solche fehlerhaften Umstände sofort auf. ==== Beispiel ==== |/ Datei: style.css / / Schwarzer Rahmen, Zentrierter Text, 5 Pixel Abstand von oben / #header, #nav, #footer { text-align:center; border: 1px solid black; margin-top: 5px; padding: 5px; font-family: Verdana, Arial; } / Schriftgröße auf 140% Hintergrundfarbe auf grau / #header, #footer { font-size: 140%; background: #f5f5f5; } div#main { margin: 20px; } / Grauer Text / h1, abbr { color: gray; font-family: Verdana, Arial; } / Schriftfamilie für p-Elemente / p { font-family: Verdana, Arial; } / Absatztext für einen Hinweis / p.hinweis { margin-left: 50px; border-left: 10px solid green; padding-left: 5px; } / Absatztext für einen Hinweis als Warnung / p.hinweis.warnung { border-left: 10px solid red; border-top: 2px solid red; border-right: 10px solid red; border-bottom: 2px solid red; text-align: center; } / Schriftgröße auf 130% */ .bigfont { font-size: 130%; }| Klassenselektor Kopfzeile Navigation Klassenselektor Das p-Element ohne einer Klasse. Das p-Element mit der Klasse hinweis. Das p-Element mit den Klassen hinweis warnung. Das p-Element mit der Klasse warnung. Das p-Element mit den Klassen hinweis bigfont. Fußzeile [[https://jsfiddle.net/527sxmcf/|Live Preview]]| Der Klassenselektor ist der Selektor mit dem Punkt, und der ID-Selektor ist der Selektor mit der Raute. Ebenso sollten Sie sich merken, dass Sie zwar jedes HTML-Element mit einer oder auch mehreren Klassen versehen können, aber grundsätzlich nur mit einer ID. Im Gegensatz zu Klassen müssen IDs in einem HTML-Dokument immer einzigartig sein. Daher darf eine bestimmte ID auch nur einmal in einem HTML-Dokument vorkommen. Auch ist es nicht erlaubt, einem HTML-Element mehr als eine ID zuzuweisen. Groß- und Kleinschreibung: In CSS wird nicht zwischen Groß- und Kleinschreibung von Selektoren unterschieden. Sonderzeichen in Selektoren: Für den Namen des Selektors dürfen Sie nur Groß- und Kleinbuchstaben (a–z; A–Z), Ziffern (0–9) und den Bindestrich (-) verwenden sowie das Unterstrichzeichen (_). Der Name darf außerdem nicht mit einer Ziffer beginnen.

'' Element. h1 ~ p { font-size: 18px; } ==== 5. Gruppenselektor: ==== Der Gruppenselektor ('','') ermöglicht es Ihnen, die gleichen Stile auf verschiedene Elemente anzuwenden. Zum Beispiel wendet ''h1, h2, p'' die Stile auf alle ''

'', ''

'' Element. `h1 ~ p { font-size: 18px; }` ==== 5. Gruppenselektor: ==== Der Gruppenselektor ('','') ermöglicht es Ihnen, die gleichen Stile auf verschiedene Elemente anzuwenden. Zum Beispiel wendet ''h1, h2, p'' die Stile auf alle ''