How do I select the next item after a target element in css?

Question

I have the follow:

<a name="a"></a><b>A</b>

I want to select the next item, the <b> , and highlight it when the target is selecting. To select anything in the a tag I use: (for example)

[id]:target {background:pink;}

And that works. However, when I use this:

[id]:target + b {}

This doesn't work. Is this not possible with CSS? I wish I could wrap the a tag around the item, but I don't have that option here.

Answer 1

It will not work, if you use the attribute "name" and then look for "id" in your CSS.

 [id]:target { background:pink; } [id]:target + b { background:pink; } 

 <a id="a">A</a> <b>B</b> <a href="#a">Turn pink!</a> 

This turns both A and B pink (tested in Chrome / Firefox)

Answer 2

Update your HTML to use ID's or update you CSS selectors to look for the name attribute:

 [name]:target {background:pink;} [name]:target + b {background:blue; color:white;} 

 <a href="#a">focus</a> | <a href="#">blur</a> <br /> <a name="a">I am the A </a><b>I am the B</b>