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.

http://stackoverflow.com/questions/3660046/css-next-element – WhiteLine Oct 29 '14 at 12:41 — WhiteLine, Oct 29 '14 at 12:41

score 4 · Accepted Answer · answered Oct 29 '14 at 12:48

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)

score 1 · Answer 2 · answered Oct 29 '14 at 12:54

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>

2 Answers2