CSS - Selectors / Selektoren: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 47: | Zeile 47: | ||
p | p | ||
</pre> | </pre> | ||
| + | |||
| + | === Attribute Selektieren === | ||
| + | |||
| + | {| class="wikitable" | ||
| + | |- | ||
| + | ! 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|="en"] ||Attribute Hyphenated Selector || Selects an element if the given attribute value is hyphen-separated and begins with the word stated | ||
| + | |} | ||
== CSS3 Pseudo Selektoren == | == CSS3 Pseudo Selektoren == | ||
https://www.mediaevent.de/css/css3-selektor-pseudo.html | https://www.mediaevent.de/css/css3-selektor-pseudo.html | ||
Version vom 12. August 2022, 15:43 Uhr
Links
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
Nachfahre / Descendant Selector
Inneres Element muß aber nicht direkt folgen
div p
div --span ----p
Kind / Child Selector
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
Muß direkt folgen
h5+p
h5 p aber nicht h5 span p
Indirekter Nachbar
Alle folgenden
h5~p
h5 p ul p
Attribute Selektieren
a[lang|="en"] ||Attribute Hyphenated Selector || Selects an element if the given attribute value is hyphen-separated and begins with the word stated| 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 |
