Well, I used the inspector on a link to find the reference, and used this in my custom css area:
/* change link color */
.entry-content p a:not(.ow-button-hover):not(.button), .entry-content li a:not(.ow-button-hover):not(.button), .entry-content dl a:not(.ow-button-hover):not(.button), .entry-content pre a:not(.ow-button-hover):not(.button), .entry-content code a:not(.ow-button-hover):not(.button), .entry-content blockquote a:not(.ow-button-hover):not(.button) {
color: #8aa8e0;
font-weight: 600;
}
It works, but I’m not familiar with these references, so I fear I may change something I don’t mean to change. Am I likely to have broken something with this?
-
This reply was modified 8 years, 5 months ago by
terry777.
Hi @terry777
Thanks for posting.
The good thing about making changes via a Custom CSS plugin or Customize > Additional CSS is that you’re working in a really safe space to work in. It isn’t like making PHP changes in a child theme where you can cause a fatal error. If you break styling you’ll see the issue and can remove the rule you just added. The rule you’ve added looks great 🙂
Well, it worked for the links on the pages, but not the sidebar, so I added this:
a {
color: #8aa8e0;
font-weight: 600;
}
Would that have worked for all links? I’m used to the old
/* unvisited link */
a:link {color: #8aa8e0;}
/* visited link */
a:visited {color: #8aa8e0;}
/* mouse over link */
a:hover {color: #8aa8e0;}
/* selected link */
a:active {color: #8aa8e0;}
Can you explain how the code below is different? I’ve never seen it before.
.entry-content p a:not(.ow-button-hover):not(.button), .entry-content li a:not(.ow-button-hover):not(.button), .entry-content dl a:not(.ow-button-hover):not(.button), .entry-content pre a:not(.ow-button-hover):not(.button), .entry-content code a:not(.ow-button-hover):not(.button), .entry-content blockquote a:not(.ow-button-hover):not(.button) {
color: #8aa8e0;
}
It it preferable?
Sure. It’s just a question of specificity.a { } targets all links. .entry-content a targets links in the entry-content div. The rule then continues to target other specific selectors. So preferable depends on what you’re targeting. Hope that helps.
Thanks, I am more curious about a:not(.ow-button-hover) etc. as I’ve never seen “not” in a reference before. Does that mean “the link which is not in the class ow-button-hover”?
