Jump to content
newcoder1010

How to apply hover, focus, active selector for all links

Recommended Posts

Hi,

When I inspect my page in chrome, I see the links shows in different formats. Below are some examples:

.nav > li > a
.dropdown-menu > .active > a
.nav .open > a

 

Regardless how the a links show, I like to apply css to all links. Below css is not working for all the links. My site is a bootstrap theme. Some css is being applied from bootstrap CDN and not reading my css unless I delete bootstrap css. 

a:link {
    color: blue;
}


/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: yellow;
}

a:focus {
    color: green;
}

How can I apply css by forcing as :

- All links blue color

- All links on hover red.

- All links on click green

- All links when we are on the page color(active page) are yellow. 

Thank you.

 

Share this post


Link to post
Share on other sites

The problem is that the selectors above are much more specific than the ones below, you will need to add additional selectors to override the bootstrap ones. There are some quick ways to easily override all rules, but I would be careful with them as it would make it much more difficult to override your own rules later.

If your <body> element has an ID, the ID selector takes precedence over all other selectors. Given this body tag <body id="site">, these selectors would change all links:

#site a:link {
    color: blue;
}

#site a:hover {
    color: red;
}

#site a:active {
    color: yellow;
}

#site a:focus {
    color: green;
}

The only way to override this is by using another ID selector.

Share this post


Link to post
Share on other sites

The usual styling must be applied in order of link, visited, hover, active, then add others after this initial styling.

I would create your own custom stylesheet to place these styles into, to overwrite bootstrap and any other css framework.

This prevents for example your custom css, if placed within bootstrap being wiped if updated.

This custom stylesheet should appear below all other stylesheets.

Now you have few options

1) identify each link selector styling and overwite with your own custom css, exactly as the discovered selector used.

2) give body a id ref and use id ref with selector

Example: #mycustomcss a:link{}

This by theory should overwrite most, unless the css selector has higher id precedence, or uses !important, or the link itself has inline color: styling.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×