CSS - Selectors / Selektoren

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

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");
}

CSS3 Pseudo Selektoren

https://www.mediaevent.de/css/css3-selektor-pseudo.html