====== LU01d - Spezielle CSS-Selektoren ====== ===== Universalselektor ===== Mit dem Universalselektor werden alle HTML-Elemente auf einmal in einem Dokument markiert. Der Universalselektor wird mit dem Sternchen * notiert. Der Universalselektor muss bei einer solchen Verwendung immer als erstes aufgeführt werden. === Beispiel === Der folgende Universal-Selektor setzt überall einen gepunkteten grünen Rahmen. /* Grüner, gepunkteter Rahmen für alle Elemente */ * { margin: 5px; padding: 3px; border: 2px dotted green; text-align: center; } Mit dem folgenden CSS-Code soll um das ''
''-Element, statt dem grünen Rahmen, ein roter Rahmen gezogen werden. Hier wird kein Universalselektor angewendet: /* Grüner, gepunkteter Rahmen für alle Elemente */ * { margin: 5px; padding: 3px; border: 2px dotted green; text-align: center; } /* Nur ein Rahmen, kein Universal- sondern normaler Typselektor */ main { border: 3px solid red; } Mit Hilfe des Universalselektors soll nun zusätzlich um jedes **Kindselement** von ''
'' **ein blauer Rahmen** gezogen werden: /* Grüner, gepunkteter Rahmen für alle Elemente */ * { margin: 5px; padding: 3px; border: 3px dotted green; text-align: center; } /* Nur ein Rahmen, kein Universal- sondern normaler Typselektor */ main { border: 3px solid red; } /* Rahmen um alle Kindselemente im main-Element */ main * { border: 2px solid blue; } === Demo ===
Kopfzeile

Universalselektor

Ein einfacher Absatztext.

Ein zweiter Absatztext

Fußzeile
[[https://ict.bzzlab.ch/data/lp01/2022/m287/themen/css/selektoren/bsp/teil02/01/index.html|Live Demo]] ===== Attributselektor ===== Seit CSS Level 2 gibt es Selektoren, die HTML-Elemente anhand ihrer Attribute ansprechen können. In diesem Fall muss der Attributname zwischen eckigen Klammern [] gesetzt werden. {{:modul:m293:learningunits:lu12:attribut_selektor_1.png?600|}} Dieser Attributselektor wird in einem HTML-Dokument um jedes HTML-Element, das ein ''title''-Attribut besitzt, einen Rahmen zeichnen. /* Styling für alle Elemente mit dem Attribut title */ [title] { border: 4px solid black; } Dieser Attributselektor kann auch nur auf bestimmte HTML-Elemente angewendet werden. Im Beispiel unten selektiert der Attributselektor alle title-Attribute des ''''-Elements. /* Styling for alle a-Element mit dem Attribut title */ a[title] { text-decoration: none; color: red; font-weight: bold; border: 2px dotted red; } === Demo ===

Attributselektor

Fach M293 ... Fach ICT-02

Dieser Absatz hat auch ein title-Attribut.

[[https://ict.bzzlab.ch/data/lp01/2022/m287/themen/css/selektoren/bsp/teil02/04/index.html|Live Preview]] ==== Attributselektor mit einem bestimmten Attributwert ==== Mit dem Attributselektor können Attribute mit einem bestimmten Wert selektiert werden. Es gibt drei Möglichkeiten einen bestimmten Attributwert auszuwählen: ^Selektor ^Bezeichnung ^Auswahl ^Beispiel^ |''[attr=wert]'' |Attributselektor (Attributwert) |jedes Element, bei dem das Attribut ''attr'' den Wert ''wert'' enthält |''''| |''[attr~=wert]'' |Attributselektor (Attributwert) mit Tilde (''~'') |jedes Element, bei dem im Attribut ''attr'' der Wert ''wert'' als allein stehendes Wort vorkommt |''''| |''[attr%%|%%=wert]'' |Attributselektor (Attributwert) mit Verkettungszeichen (''%%|%%'') |jedes Element, bei dem im Attribut ''attr'' der Wert ''valx'' am Anfang als eine durch Bindestrich getrennte Zeichenfolge steht |''''| === Beispiele === Styling für alle HTML-Elemente, die im title den Attributwert "deprecated" besitzen. /* Styling für alle HTML-Elemente wo title den Attributwert deprecated besitzt */ [title=deprecated] { color: red; text-decoration: line-through; } Styling für alle HTML-Elemente, die im title als Attributwert das Wort "bzzlab" enthalten. /* Styling von HTML-Elemente wo title im Attributwert das Wort "bzzlab" enthält */ [title~=bzzlab] { font-weight: bold; color: red; } Styling für alle ''''-Elemente mit dem Attribut title ''title''.¨ /* Styling von HTML-Elemente wo title im Attributwert das Wort "bzzlab" enthält */ [title~=bzzlab] { font-weight: bold; color: red; } === Demo ===

[title=deprecated]

Das HTML-Element center wurde in HTML5 als veraltet erklärt und sollte durch eine CSS-Lösung wie beispielsweise 'text-align: center' realisiert werden.

[title~=bzzlab]

[hreflang|=de]

[[https://ict.bzzlab.ch/data/lp01/2022/m287/themen/css/selektoren/bsp/teil02/05/index.html|Live Preview]] ==== Attributselektor mit einem bestimmten Teilwert (Teilübereinstimmung) ==== In CSS3 wurden Attributselektoren erweitert, um auch Teilwerte auszuwählen. Im Folgenden werden die drei Attributselektoren tabellarisch dargestellt: ^Selektor ^Bezeichnung ^Auswahl ^Beispiel^ |''[attr^=wert]'' |Attributselektor (Teilwert) |jedes Element, bei dem das Attribut ''attr'' mit der Textfolge ''wert'' anfängt |''''| |''[attr$=wert]'' |Attributselektor (Teilwert) |jedes Element, bei dem das Attribut ''attr'' mit der Textfolge ''wert'' endet |''''| |''[attr*=wert]'' |Attributselektor (Teilwert) |jedes Element, bei dem das Attribut ''attr'' die Textfolge ''wert'' enthält |''''| Styling für alle ''''-Elemente, bei denen das Attribut ''href'' mit ''http:%%//%%'' beginnt. /* Styling alle a-Elemente wo das Attribut href mit http:// beginnt */ a[href^="http://"] { text-decoration: none; border-bottom: 2px dotted red; color: red; } Styling für alle ''''-Elemente, bei denen das Attribut ''href'' mit ''.pdf'' endet /* Styling für a-Elemente wo das Attribut href mit .pdf endet */ a[href$=".pdf"] { text-decoration: none; color: red; padding: 1px; border: 2px dotted red; } Styling für ''''-Elemente, bei denen das Attribut ''href'' die Textfolge ''mydomain'' enthält. /* Styling für a-Elemente wo im Attribut href die Textfolge mydomain enthalten ist */ a[href*=mydomain] { font-weight: bold; color: red; } === Demo ===

Attributselektor (Teilwerte)

Weitere Informationen zu diesem Thema finden Sie auf dieser Website wieder.

Zusätzlich habe ich Ihnen ein PDF-Dokument mit interessantem Inhalt zusammengestellt.

Und natürlich noch ein paar sehr interessante Links:

[[https://ict.bzzlab.ch/data/lp01/2022/m287/themen/css/selektoren/bsp/teil02/06/index.html|Live Preview]] ---- {{tag>m293-LU12 m293-G2G m293-G2F}} Nach [[http://ict.bzzlab.ch|Daniel Garavaldi]]