CSS - Selectors / Selektoren: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „ == Arten von Selektoren == === Nachfahre / Descendant Selector === Inneres Element muß aber nicht direkt folgen div p <pre> div --span ----p </pre> === Kin…“) |
|||
| (7 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | + | == 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 == | == Arten von Selektoren == | ||
=== Nachfahre / Descendant Selector === | === Nachfahre / Descendant Selector === | ||
| Zeile 38: | Zeile 40: | ||
=== Indirekter Nachbar === | === Indirekter Nachbar === | ||
Alle folgenden | Alle folgenden | ||
| − | h5 | + | h5~p |
<pre> | <pre> | ||
h5 | h5 | ||
p | p | ||
| + | ul | ||
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[barzeichen]="en"] || Attribute Hyphenated Selector || Selects an element if the given attribute value is hyphen-separated and begins with the word stated | ||
| + | |- | ||
| + | |} | ||
| + | |||
| + | Beispiel: | ||
| + | <pre> | ||
| + | a[href$=".pdf"] { | ||
| + | background-image: url("images/pdf.png"); | ||
| + | } | ||
| + | </pre> | ||
| + | |||
| + | == CSS3 Pseudo Selektoren == | ||
| + | https://www.mediaevent.de/css/css3-selektor-pseudo.html | ||
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");
}
