Search code examples
htmlcsscss-selectorspseudo-class

CSS Target pseudo-class not changing DIV properties

I'd like to change the property of one DIV when a different one is targeted.

Here's my CSS:

#boards-list:target{
    background-color: black;
}
#boards-list:target  div#schools-list{
    background-color: blue;
}

And here is my HTML:

<body>

<div id="schools-sub-nav">

<a href="#schools-list">Schools List</a> <a href="#boards-list">Boards List</a>

</div>

<div id="schools-container">

    <div id="schools-list">
    One
    </div>

    <div id="boards-list">
    Two
    </div>

</div>

My only thought is that I've made a mistake in my syntax for using the target pseudo-class.

Solution

  • Now, do you want the schools list blue and the boards list black? If so, just remove the boards-list selector from the second statement? So you should have:

    #boards-list:target
{
    background-color: black;
}

#schools-list:target
{
     background-color: blue;
}​

    DEMO: http://jsfiddle.net/3dbTq/1