Viewing 9 replies - 1 through 9 (of 9 total)
  • try

    .navigation a {
    color: #004c7c !important;
    }

    Thread Starter 008Rohit

    (@008rohit)

    Thanks for your help.

    This did it:

    .post-navigation .nav-links a {
            color: #004c7c !important;
    }

    Any idea why the ‘!important’ part had to be used?

    Actually because there is this down below it.

    .site-footer a, .navigation a {
    	color: #ce5343;
    }

    Generally in CSS what comes after will win, unless the former has higher specificity.

    Thread Starter 008Rohit

    (@008rohit)

    @paul

    Because of this:

    <nav class="navigation post-navigation" role="navigation">
    		<h1 class="screen-reader-text">Post navigation</h1>
    		<div class="nav-links">
    
    						<a href="https://test.techtage.com/just-another-shitty-test-post-1/" rel="next">Just another shitty test post #1 <span class="meta-nav">&rarr;</span></a>
    		</div><!-- .nav-links -->
    	</nav><!-- .navigation -->

    Shouldn’t .nav-links over-write .navigation’s values anyway?

    You have this

    .meta-nav a, .nav-links a, .post-navigation a {
            color: #004c7c;
    }
    
    .site-footer a, .navigation a {
    	color: #ce5343;
    }

    The .nav-links a and .navigation a has the same specificity, so the latter wins.

    Thread Starter 008Rohit

    (@008rohit)

    I had got rid of

    .meta-nav a, .nav-links a, .post-navigation a {
            color: #004c7c;
    }

    and replaced it with,

    .post-navigation .nav-links a {
            color: #004c7c;
    }

    Still it wouldn’t work unless I add an !important.

    BTW, I read somewhere that we should reduce the use of ‘!important’ as much as possible. I’d like to know why.

    Take out the !important and clear browser cache.

    if for example you use CSS to change the colour of a link and place the style tag into a stylesheet 3 times, its the 3rd tag is what will be used unless you specify !important on one of the tags before. !important basically tells the browser it has to use that style.

    If its not working without adding !important its because further down in your stylesheet the colours being changed again.

    try using if you use chrome press f12 and use the developer tools to view the html and css on a page, makes life a lot easier! (or firebug on firefox)

    Thread Starter 008Rohit

    (@008rohit)

    @paul

    That works! Thanks a ton. ??

    @tom

    Thanks for the information. ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Changing the Post Navigation links colours’ is closed to new replies.