Geek Answers Handbook

Unable to change link color

Here is a screenshot of the problem: enter image description here

Please note that we are on the stalk page. The CSS I wrote is supposed to change the color of the active page. Here is the CSS:

 #nav { border-top:10px solid #A7C1D1; height:45px; padding-left:100px; padding-top:20px; margin-left:0; color:#000; } #nav a { color:#000; text-decoration:none; } #nav a:visited { color:#000; } #nav a:hover { color:#93AFBF; } #nav .active { color:#93AFBF; }

I used to have CSS for #nav .active to create a border around the active page. This worked, and I could see the border around the word "stem" when I was on the / stalk page. But this time I decided to just change the color of the word. Here I ran into a problem.

Here is the HTML that displays for the page:

  <div id="nav"> <a href="/">home</a> &middot; <a href="/stalk" class="active">stalk</a> &middot; <a href="#">link3</a> &middot; <a href="#">link4</a> </div>

If I get CSS for #nav a:visited then CSS for #nav .active will work, but now the visited links are blue when I want them to stay black.

+4
source share
6 answers

Use

 #nav a.active { color:#93AFBF; }

#nav a:visited has a higher specification w3 specs than #nav .active and thus applies.

+6
source

Try

 #nav a.active { color: #93afbf }

That should do it.

+3
source

to try:

 #nav a:link {color: #000;} #nav a:visited {color: #000;} #nav a:hover {color: #93afbf;} #nav a:active {color: #93afbf;}
0
source

You mix an active pseudo-class

Site Point Verification

This pseudo-class matches any element that is in the process of activation. This applies, for example, throughout the entire click of a link from the point at which the mouse buttons were clicked until its point was released again. The pseudo-class does not mean a link to the active or current page - it is a common misconception among CSS beginners.

Similar problems

0
source

The Border property is not inherited, but the color property. This way you inherit the color property for your link from #nav, while the border property was declared in the "active" class rules. You must declare a color property for the link with the "active" class, as suggested by Gaby

0
source

Today I found it unusual. (The color of the link, which I could not change.) I went into the inspector and first found a set of text-decoration-color properties. But no, that would be too easy. I scroll down to color and find this :not selector, created by the theme author. In my specific case, the solution was to duplicate (overwrite) this weird selector with the color I wanted:

#the-post .entry-content a:not(.shortc-button) { color: white !important; }

My suggestion is to go into your inspector (F12) and find the “Calculate” tab and see where the colors come from. Usually this is straightforward where the color comes from, and the inspector will even tell you which file and which line number the color has set. Then the solution: do you have access / permission to this file? Or maybe you have access, but you need access to this file?

If you want to avoid changing the color source, for some reason you can simply re-declare the color even further down the page, for example, in the footer or immediately after loading the theme, no matter what happens. Of course, given this option, it is usually preferable to find the root of the problem, and then you will get less CSS code that loads faster and easier to maintain.

0
source

More articles:


All Articles