CODEWITHSUNDEEP
csscss-selectors
user1113534
user1113534

Reputation:

CSS3 :target issue

I have 2 "links" which has to get a color when i click on them. But they need also be in a h1 tag.

Like this:

<div id="content" class="work">
    <h1 style="border-bottom:1px solid #CCC;"><a id="link-grafisk-design" href="#grafisk-design">Grafisk design</a></h1>
    <h1 style="border-bottom:1px solid #CCC;">&nbsp;/&nbsp;</h1>
    <h1 style="border-bottom:1px solid #CCC; width:276px"><a id="link-webbdesign" href="#webbdesign">Webbdesign</a></h1>
</div>

But it wont change color when i click in one of them.
Here's the CSS

#webbdesign:target ~ #link-webbdesign {
    color:#00A2FF;
}

Upvotes: 0

Views: 103

Answers (1)

Ana
Ana

Reputation: 37179

That's not what :target is for. For styling the link you click on you should use h1 a:active.

h1 a:active {
     color:#00A2FF;
}

If you want the changed colour to persist until the user clicks something else, then use:

h1 a:focus,
h1 a:active {
    color: #00A2FF;
}

DEMO

Upvotes: 6

Related Questions