CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-class
garretruh
garretruh

Reputation: 94

CSS :target pseudo class and sibling issue

I'm attempting to change the properties of a div when a different div has been :target(ed). A JSFiddle is here: http://jsfiddle.net/FC5sQ/. The line where (I believe) the issue stems from is the

#tevents:target ~ .titlewrap {top:0;}

line in the CSS. Basically, once the #tevents id is targeted, I want the titlewrap class to have a top value of 0.

Upvotes: 1

Views: 675

Answers (1)

BoltClock
BoltClock

Reputation: 723388

The general sibling combinator ~ doesn't work backwards. So, since your .titlewrap is coming before #tevents in your HTML, your selector won't work.

Unfortunately there's no previous sibling combinator, so if you can't change the markup and style the changes accordingly, then you can't do this with :target and a sibling combinator.

By the way, your top: 30% style isn't taking any effect either, and that's because you didn't set an explicit height for your .titlewrap.

Upvotes: 4

Related Questions