changing link style in child theme

Can you please post a link to your site? It makes it easier to see what might have gone wrong with your child theme. Also, can you give an example of what change you tried to make but it’s not showing up? Thanks.

The website I’m working on is: https://www.jouwnatuur.heelhulpje.nl

When you hover the link in the menu, it turns dark, and I wanted to change that. So I changed this, for example:

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
background-color: #220e10;
color: #fff;
}

into this:

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
background-color: transparent;
color: #ea9629;
}

But it doesn’t do anything… it did make changes in the textcolor and the font, but the menu and the links seem to need something else…

Maybe it’s something in the functions.php that needs to be added or something?

Ignore my previous comment.

I see you have this:

.nav-menu li:focus > a,
.nav-menu li a:focus {
	background-color:transparent
	color: #ea9629;

}

Do you see that you’re missing a semi-colon after “transparent”? Also note that this is a focus style, not a hover style.

haha ok, thank you!!
Other example then..!

I had:

a {
color: #ca3c08;
text-decoration: none;
}

a:visited {
color: #ac0404;
}

a:focus {
outline: thin dotted;
}

a:active,
a:hover {
color: #ea9629;
outline: 0;
}

a:hover {
text-decoration: underline;
}

And I made:

a {
color: #459c8e;
text-decoration: none;
}

a:visited {
color: #e8d141;
}

a:focus {
outline: thin dotted;
}

a:active,
a:hover {
color: #ea9629;
outline: 0;
}

But it doesn’t show… (In the meantime, I’ll adapt the former code, see if that works…)

It sounds like you’re not using specific enough selectors. What exactly were you trying to style?

I don’t see that rule in your child theme right now. When I put it in using Chrome DevTools, it seems to work. Can you try adding it back into your child theme’s style.css file?

oh wait a sec

ok that first problem is solved!

The other changes are about the other links on the website: the color, the hover color and the hover underline. But it hasn’t worked yet.

There seems to be a problem with reloading or something. Other coed I had tried to adapt, were changed back to the original code somehow… mysterious.

In the navigation menu, I changed the current page from italic to normal. But when I looked just now, I saw that that code was back to italic. Really strange.

Again, probably it’s me doing something wrong… why is the color of the current page in the menu still not changed to green?

.nav-menu li:focus > a,
.nav-menu li a:focus {
background-color:transparent;
color: #94c123;
}

You have this rule for the current page menu item:

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
   color: #bc360a;
   font-style: normal;
}

Thanks, that was what I was looking for..!

I also don’t seem to do the right thing when I want to change the link color (in the text). It’s reddish… but I use this code (which is blue-ish):

a {
color: #459c8e;
text-decoration: none;
}

As Andrew mentioned earlier, your rules don’t have enough specificity. If you use a web debugging tool like Firebug or Chrome Developer Tools, you’ll be able to see the rules which are in effect for a particular element and write your selectors with a high enough specificity to override them. For example, open up this page in Chrome and right-click on the link towards the bottom of the page (inside the page content) and select Inspect element. Chrome DevTools will open up in the bottom half of the browser, with the link element highlighted in the left pane and the CSS rules which are in effect for that element on the right. If you scroll down the right pane, you’ll eventually come to the rule which you wrote, and you’ll see it struck out. That’s because the rules above have a higher specificity (the CSS rules are arranged in order of specificity). You’ll see this rule at the top:

a:visited {
   color: #e8d141;
}

So if you’ve already visited the link, you’ll see this yellow color instead of the green because the :visited pseudo-class adds 10 points to the specificity. If you didn’t visit the link, then this rule will have precedence:

.entry-content a,
.comment-content a {
   color: #bc360a;
}

Again, the .entry-content class adds 10 points to the specificity, so it’s going to take precedence over your green rule. So, if you want to make the links green, the first thing you should do is copy the selector from the second rule above (by adding the .entry-content class) into your own rule, so it looks like this:

.entry-content a {
color: #459c8e;
text-decoration: none;
}

As long as your rule comes after the existing rule with the same selector (or specificity), then your rule will take precedence.