CODEWITHSUNDEEP
csscss-selectors
Juan Lie
Juan Lie

Reputation: 145

My CSS selector ":active" not working

#selec:active{background-color:#000000;}

<a href="<?php>phpscript-dynamic<?>"><div id="selec">TITLE</div></a>

But it doesn't work... I am using <div><a></a></div>, but does not work either.

Anyone can help me?

The code:

::CSS::

#selec:hover{background-color:blue;} #working

#selec:active{background-color:red;}#not work

::PHP::

<a href="?room=<?php echo $ID;?>"><div id="selec"><?php $name;?></div></a>

Thank you

Upvotes: 0

Views: 2787

Answers (1)

kapa
kapa

Reputation: 78681

The CSS3 specification states that:

There may be document language or implementation specific limits on which elements can become :active or acquire :focus.

So it does not state that it should not work on your div. Since the specification is lenient about this, there might be browser implementation differences. The demo by @Engineer showed me that your code works in Chrome.

Since the a element is sure to have an :active state in every browser, the following would certainly work for example:

#selec a:active {background-color:#000000;}

<div id="selec"><a href="dynamic.php">TITLE</a></div>

Here, you are using :active on the a that is a child of #selec. You make use of the descendant selector.

It should also work the other way round - the :active selector is still on the a:

a:active #selec {background-color:#000000;}

<a href="dynamic.php"><div id="selec">TITLE</div></a>

Upvotes: 4

Related Questions