1

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
garretruh
  • 94
  • 7

1 Answers1

4

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • If that's the case, would a modified HTML structure with the #tevents div defined before the .titlewrap div work? I tried it in JSFiddle, and the result was the same as before. – garretruh May 17 '12 at 18:21
  • @natosennimi: It will work, I explain in the last paragraph why your result is the same. You need to define a height for your `.titlewrap`. – BoltClock May 17 '12 at 18:22
  • Thanks, figured it out. BTW, the `top:30%;` on the `.titlewrap` works/shows up just fine on my browser. Maybe a x-browser compatibility issue. – garretruh May 17 '12 at 19:03