Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling active anchor elements with css

Tags:

html

css

I have some trouble to find a css solution for having an active anchor colored...

Why are the active anchors not red so that if clicked on "momo" momo keeps red? Or is active the wrong pseudoclass for that?

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>test</title>
    <style type="text/css">
        a:active{
        color:red;
        }
        a:hover{
        color:yellow;
        }
        </style>
    </head>

    <body>
    <ul> Navigation
    <li class="subli"><a href="#momo">momo</a></li>
    <li class="subli"><a href="#ipsi">ipsi</a></li>
    </ul>
    </body>

</html> 

Thanks Juru

like image 706
Jurudocs Avatar asked Aug 29 '26 09:08

Jurudocs


2 Answers

:active means "While being activated" e.g. when it is focused and the enter key is pressed or while it is hovered and the mouse button is being depressed. (Note that since you have have :hover after :active you'll always override it for mouse activates)

There is no pseudo-class for "Anchor with an href value that resolves to the current location". For that you need to need to modify the HTML (preferably before it gets to the browser, but you can use JS as well).

like image 125
Quentin Avatar answered Aug 31 '26 22:08

Quentin


Besides, you can use the target pseudo-class, which is pretty well supported already, to style the element referenced by the anchor.

<a href="#this-element">Click here.<div>
<div id="this-element">It's going to be red.<div>

<style>
  #this-element:target{
    color:red;
  }
<style>
like image 30
Israel Teixeira Avatar answered Aug 31 '26 23:08

Israel Teixeira



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!