Grow your CSS skills. Land your dream job.

yet another a:active problem

  • # April 4, 2013 at 5:57 am

    i have my navigation bar, the **:hover** and **:active** state must be in same style,but :active is not applied to my desired style instead a simple border is applied

    what should be problem ?

    anything wrong with my selectors ?

    check this [pen](http://codepen.io/yoyo/pen/qEHek “A:active”)

    # April 4, 2013 at 6:36 am

    Add the following within a:active:

    outline: 0;

    # April 4, 2013 at 6:45 am

    @BenWalker

    sorry not working yet :(

    if you can update my pen

    # April 4, 2013 at 6:56 am

    [http://codepen.io/anon/pen/IotpH](http://codepen.io/anon/pen/IotpH “http://codepen.io/anon/pen/IotpH”)

    Sorry — needed a:link as well.

    # April 5, 2013 at 4:24 am

    @BenWalker

    right now there is no border, but i want the same style of the :hover effect to the :active state also

    # April 5, 2013 at 12:38 pm

    It is.

    The `:active` state is merely the active of clicking on the link, not a ‘current page’ function that some people confuse it for. Is that happening in this case?

    # April 6, 2013 at 1:37 am

    @TheDoc

    ya it is….then how can i show the ‘current page’ link to be highlighted somewat ?

    **:current** ?

    # April 6, 2013 at 4:57 am

    Nope.

    There are a couple of ways…the simplest way is to give each page (or ID) a separate class and each link an individual class too.

    Then you could do something like

    .page-1 .home {
    styling;
    }

    .page-2 .about {
    styling;
    }

    otherwise…javascript.

    # April 6, 2013 at 6:35 am

    > **:current**

    This is a time-dimensional pseudo-class part of CSS Level 4 Selectors module representing the innermost element, or ancestor of an element, that is currently being displayed.

    It goes along with `:past` and `:future`.

    As far as I know, it’s mostly meant to help screenreaders and such things;

    # April 6, 2013 at 8:00 am

    @Paulie_D @HugoGiraudel

    ya i got it thanks :)

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".