CSS - Selectors / Selektoren: Unterschied zwischen den Versionen
Aus Wikizone
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 65: | Zeile 65: | ||
| a[href$=".pdf"] ||Attribute Ends With Selector || Selects an element if the given attribute value ends with the value stated | | a[href$=".pdf"] ||Attribute Ends With Selector || Selects an element if the given attribute value ends with the value stated | ||
|- | |- | ||
| − | | a[rel~="tag"] ||Attribute Spaced Selector || Selects an element if the given attribute value is whitespace-separated with one word being exactly as stated | + | | a[rel~="tag"] || Attribute Spaced Selector || Selects an element if the given attribute value is whitespace-separated with one word being exactly as stated |
| + | |- | ||
| + | | a[lang[barzeichen]="en"] || Attribute Hyphenated Selector || Selects an element if the given attribute value is hyphen-separated and begins with the word stated | ||
|- | |- | ||
| − | |||
|} | |} | ||
Aktuelle Version vom 12. August 2022, 15:47 Uhr
Links[Bearbeiten]
Gute Übersicht mit Bildern: https://www.mediaevent.de/css/css-selektor-kontextselektor.html https://learn.shayhowe.com/advanced-html-css/complex-selectors/
Arten von Selektoren[Bearbeiten]
Nachfahre / Descendant Selector[Bearbeiten]
Inneres Element muß aber nicht direkt folgen
div p
div --span ----p
Kind / Child Selector[Bearbeiten]
Inneres Element muß direktes Kind sein, also kein Enkel. Muß aber nicht direkt im Code folgen.
div>table
div --p --table aber nicht div --span ----table
Nachbar / Adjacent Selector[Bearbeiten]
Muß direkt folgen
h5+p
h5 p aber nicht h5 span p
Indirekter Nachbar[Bearbeiten]
Alle folgenden
h5~p
h5 p ul p
Attribute Selektieren[Bearbeiten]
| Selektor | Name | Verwendung |
|---|---|---|
| a[target] | Attribute Present Selector | Selects an element if the given attribute is present |
| a[href="http://google.com/"] | Attribute Equals Selector | Selects an element if the given attribute value exactly matches the value stated |
| a[href*="login"] | Attribute Contains Selector | S elects an element if the given attribute value contains at least once instance of the value stated |
| a[href^="https://"] | Attribute Begins With Selector | Selects an element if the given attribute value begins with the value stated |
| a[href$=".pdf"] | Attribute Ends With Selector | Selects an element if the given attribute value ends with the value stated |
| a[rel~="tag"] | Attribute Spaced Selector | Selects an element if the given attribute value is whitespace-separated with one word being exactly as stated |
| a[lang[barzeichen]="en"] | Attribute Hyphenated Selector | Selects an element if the given attribute value is hyphen-separated and begins with the word stated |
Beispiel:
a[href$=".pdf"] {
background-image: url("images/pdf.png");
}
