CODEWITHSUNDEEP
htmlcss
Encompass
Encompass

Reputation: 592

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

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.

Upvotes: 1

Views: 369

Answers (2)

Moob
Moob

Reputation: 16184

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>

Upvotes: 1

chrona
chrona

Reputation: 1911

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)

Upvotes: 4

Related Questions