CSS næste bror selektorer
- Forrige side CSS underordnet element selektorer
- Næste side CSS ekstra bog
Naboens brøderælser (Adjacent sibling selector) kan vælge elementer, der følger efter et andet element, og som har samme forælder.
Vælg naboer
Hvis du skal vælge elementer, der følger efter et andet element og som har samme forælder, kan du bruge naboens brøderælser (Adjacent sibling selector).
For at øge toppadet for afsnit, der følger efter h1-elementet, kan det skrives sådan:
h1 + p {margin-top:50px;}
Denne selektor læses som: 'Vælg afsnit, der følger efter h1-elementet, hvor h1 og p-elementer har fælles forælder'.
Grammatikforklaring
Naboens brøderælser bruger plusstegnet (+), dvs. naboens kombinator (Adjacent sibling combinator).
Kommentar:Som med kompositoren for naboer, kan der være blanke tegn ved siden af naboens kombinator.
Se nedenfor denne dokumentstrukturfragment:
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div>
I det ovenstående fragment indeholder div-elementet to lister: En uliste og en oliste, hver liste indeholder tre listeemner. Disse to lister er næste brødre, og listeemnerne selv er næste brødre. Dog er de første listeemner i den første liste ikke næste brødre med de første listeemner i den anden liste, fordi disse to grupper af listeemner ikke tilhører samme overordnede element (de kan højst regnes som onkler og fædrene).
Husk, en kombinator kan kun vælge den anden element i to næste brødre. Se nedenstående selektør:
li + li {font-weight:bold;}
Denne selektør vil kun gøre den anden og tredje listeemne i listen fed, den første listeemne påvirkes ikke.
Kombiner med andre selektorer
Næste bror kombinator kan kombineres med andre kombinatorer:
html > body table + ul {margin-top:20px;}
Denne selektør forklares som: Vælg alle brødre ul-elementer, der følger efter en table-element, som indeholder en body-element, som selv er et barn af html-elementet.
- Forrige side CSS underordnet element selektorer
- Næste side CSS ekstra bog