CSS: Vælge element lige før/efter et andet

Ofte i en menu vil man gerne have en menuadskiller for hver menupunkt, men disse skal måske forsvinde når et menupunkt er valgt.
Eksempel:

Intet valgt element -situation (Situation 1)
Punkt 1 | Punkt 2 | Punkt 3 | Punkt 4 | Punkt 5

Valgt element -situation (Situation 2)
Punkt 1 (Punkt 2) Punkt 3 | Punkt 4 | Punkt 5

Ved det valgte element, forsvinder menuadskiller før og efter, men dette er ikke så nemt lige at gøre med CSS - UMIDDELBART!

Dette er fordi hvis vi opsætter kode og eksempel:
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
<li>Punkt 5</li>
</ul>

Ovenstående viser (Situation 1)

Du kan få adskiller ved at sætte "background-image:url('image-splitter.png');" på hver li, og "background-repeat: none;", og når du så klikker på et element bliver det til:
<ul>
<li>Punkt 1</li>
<li class="marked">Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
<li>Punkt 5</li>
</ul>

Ovenstående viser (Situation 2)

Problemet er at marked kan du sætte til "background-image: none", men den fjerner kun splitter på den ene side (i dette eksempel venstre).
Du har derfor brug for at kunne vælge den før/efter alt efter om din splitter vises i starten af din li, eller i slutningen.

DER ER DOG EN LØSNING!

Vælge element efter div i css:
.marked + li
Derved selecter du den li der er lige efter ".marked" -klassen og kan sætte "background-image: none", så den ikke vises.

Vælge element før div i css:
.marked ~ li
Derved selecter du den li der er lige før ".marked" -klassen og kan sætte "background-image: none", så den ikke vises.

Tags: css select element before another