:target not working in css

Question

Hi Friends i am using :target in CSS following is my code

CSS

.acco h3 + div{height:0px; overflow:hidden;}
.acco : target h3 + div {
    border: 2px solid red;
    height:100px;

HTML

<div class="acco">
<h3>show</h3>
  <div class="test">test</div>

  <div class="click" ><a href="#show">click</a></div>
</div>

I am targeting <div class="test">test</div> but its not working please help me

Thanks in advance...

Christoph · Accepted Answer · 2013-07-01T13:19:19.093

4

First of all, you are missing the #show anchor in your markup (and depending on the position) an adaption of the css is necessary (in every case there must not be a space in your pseudoclass :target):

<div class="acco" id="show">
/* css: no spaces*/
.acco:target h3 + div {

<!-- or -->

<div class="acco">
<h3 id="show">show</h3>

/*css: space between .acco and :target!*/
.acco :target + div {

Demo (first version)

edited Jul 01 '13 at 13:19

answered Jul 01 '13 at 13:14

Christoph

50,121
21
99
128

1

Thanks, it works good :) This target styling is new in CSS3 I guess? Or I should feel really ashamed not hearing about it earlier? :D – Ms. Nobody Jul 01 '13 at 13:18
1

@Ms.Nobody Yes it's new with selectors level 3, no reason to feel ashamed, it's so much new stuff, that one can easily get confused. Just if you are interested, there is already selectors api level 4 in work, which has a lot more cool new stuff. I recently posted an answer about that: http://stackoverflow.com/a/17400009/1047823 :-) – Christoph Jul 01 '13 at 13:21

score 3 · Answer 2 · answered Jul 01 '13 at 13:07

3

Try

.acco:target h3 + div {
    border: 2px solid red;
    height:100px;
}

without spaces

answered Jul 01 '13 at 13:07

Raul Rene

10,014
9
53
75

1

Also the `.acco` div is missing an ID, specifically the ID `show`. – ndm Jul 01 '13 at 13:14
Can u put it in working fiddle? It ain't working for me.. never seen :target.. always using :hover so I'm quite curious – Ms. Nobody Jul 01 '13 at 13:14
1

@Ms.Nobody it's still missing the anchor. Take a look at the fiddle in my answer. – Christoph Jul 01 '13 at 13:15

score 3 · Answer 3 · answered Jul 01 '13 at 13:14

The pseudo class that you’re probably most familiar with is :hover, which allows you to declare special styling that will be activated when the user mouses over an element. The :target pseudo class similarly allows for custom styling that will be activated based on a specific scenario.

:target is a pseudo selector like :hover, and there should be no space in between.

Good read about it overhere

:target not working in css

3 Answers3