CODEWITHSUNDEEP
htmlcss
Kamal
Kamal

Reputation: 2180

:target not working in css

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...

Upvotes: 1

Views: 1492

Answers (3)

Christoph
Christoph

Reputation: 51201

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)

Upvotes: 4

Mark
Mark

Reputation: 6865

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

Upvotes: 3

Raul Rene
Raul Rene

Reputation: 10270

Try

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

without spaces

Upvotes: 3

Related Questions