CSS/Selektoren/Nachbarselektor

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Nachbarselektor spricht ein Element F an, wenn es direkter Nachbar eines Elementes E ist.

Syntax E + F
Browsersupport Details: caniuse.com
Beispiel
#linkliste + p { 
  margin-top: 2em 
}
Absätze, die unmittelbar auf das Element #linkliste folgen, erhalten einen oberen Außenabstand von 2em.
Beachten Sie:

lobotomized owl selector

Der Selektor * + * wird lobotomized owl selector genannt, weil er den „Erfinder“ an eine Eule erinnerte.[1]

Er selektiert alle Elemente, denen auf der selben Ebene ein Geschwisterelement vorausgeht, also alle Elemente, die nicht das erste Kind sind.

Mithin ist er gleichbedeutend zu html :not(:first-child), aber kürzer und performanter. (Der Selektor :not(:first-child) würde auch das Wurzelelement selektieren, welches ja kein Kind ist.)

Siehe auch

Weblinks

  1. A List Apart: axiomatic css and lobotomized owls