css link color on wordpress with added class

how to change link color in wordpress
css link class
wordpress visited link color
wordpress multiple link colors
how to change menu color in wordpress
wordpress change link hover color
html change link color inline
avada hyperlink color

I am trying to edit a theme with the additional CSS options instead of hardcoding things in, but it is proving very difficult.

This page has a link on the bottom that is black and I am trying to make it white.

<figure class="wp-block-image linktest">
<img src="link" alt="" class="wp-image-119782" srcset="link" sizes="(max-width: 1024px) 100vw, 1024px">
<figcaption><a href="http://rymdcenter.se/rymdaret/partners-under-rymdaret/">Partners under Superrymdåret 2019</a>

I tried adding the following CSS.

.linktest a:link {


figcaption .linktest a:link {

Even just a:link, but it doesn't catch on. Am I missing something?

figcaption is a child of .linktest so your CSS is the wrong way around. The below should do the trick.

.linktest a {
  color: #fff;

CSS Change link color in page, The following CSS rules are for changing Post Titles, Entry meta links (Author, Date and Category) and Read More link colors. You can add more rules as you  WordPress offers you lots of opportunities to customize your blog design. Including customizing styles for your menus. In this blog post, you will learn how to customize your WordPress menu with your own CSS style without touching your theme CSS file. Before You Begin If you are a beginner in WordPress, you may be tempted to […]

Kindly add without the link:

.linktest a{

How to Customize WordPress Menu Links Color or Style, If you want to add unique styles to individual menu links such as colors or icons, this class to the link in this state, which you can use in Custom CSS to apply a  Create a custom class that allows some links to have a different color. The css file to edit may be named "style.css", "coolstyle.css" or "corporatestyle.css". In color theme templates the css files will be in the "colors" folder. Edit css files in Notepad, TextEdit or a plain text editor.


figcaption .linktest a:link {


figcaption a:link {


a doesn't have parent with linktest class.

Hope this helps. thanks

Mastering CSS Link Color: Using CSS Links With Real Examples, TL;DR – Properties can add CSS link colors according to link states. Contents. 1. CSS Link Color: Main Tips; 2. Link States; 3. CSS  Please go to Appearance → Customize → Additional CSS and add the following css: /* Standard links */ a { color: #b64f68; } /* Visited links */ a:visited { color: #ca7489; } /* Hover links */ a:hover { font-weight: bold; } and change it as you wish. Hope that helps. Kind regards

.linktest figcaption a{color:#fff}

try using above code hope it helps

How to Make WordPress Links a Different Color in 2020, Add the following code in the box that comes up (and make sure you don't You can also change the link hover color in WordPress and the text color CSS uses an oddity known as a “pseudo-class” to change link hover text  A core WordPress function called post_class() is used by themes to tell WordPress where to add those default CSS classes for posts. If you visit your website and use the Inspect tool in your browser, then you will be able to see those classes added for each post. Following are the CSS classes added by default based on what page a user is viewing.

Just try to use

.linktest a { color: white; }

instead of

.linktest a:link { color:white; }

Adding a custom class to a WordPress menu link, Adding a custom class to a WordPress menu link I've decided that I want to change a color of my menu item and change its font weight. Once a custom CSS is added to the site, it is time to change an appearance of the  Just a quick video guide for enabling the CSS class field when adding or editing menu items in WordPress. How-to Add Custom CSS To Your WordPress Website 😜 Change Menu Font Color or

CSS Link Color, Give your website links some color. Learn how to use CSS to color your HTML links with Hex color codes and HTML tags, CSS IDs, classes, :hover and more. In addition the class alignnone is added to images that are not aligned, so they can be styled differently if needed. The same classes are used to align images that have a caption (as of WordPress 2.6). Three additional CSS classes are needed for the captions, and one more for accessibility. Together, the classes are:

CSS Links in WordPress – Changing CSS Link Colors, The orginal question was regarding changing the CSS link colors in WordPress and The a in a:active stands for anchor – links are categorized under the Anchor Pseudo-classes in CSS. a:link ADDITIONAL INFO ADDED: How to Add a Custom Class to a WordPress Menu Item. 1. In Appearance > Menus, click the Screen Options tab. 2. Under Show advanced menu properties , check CSS Classes. 3. Now expand any menu item to reveal the CSS Classes (optional) text input. 4. Enter your class name and save your menu to apply

How to Change Link Colors WordPress Tip, If you find you don't like the default link colors on a theme, it's really simple to change them with just a few Edit this code in your style.css file. You can also add a text-decoration argument to add or remove an underline.

  • The :link selector is used to select unvisited links. If you have visited that link recently your styles will not show. Is that the issue?
  • this works. Although my links in the menu on the side become black on hoover now. Not sure if thats caused by this. Any idea what to put there to make them say white?
  • It shouldn't be. It looks like you have some styling in your <head> that is setting .sidebar .widget a:hover { color: #050505; }, and is overriding what you have in style.css. If you just remove that from your <head> it should revert to the orange.
  • It's not that easy to remove unfortunately. Wordpress is so damn convoluted. Can I force priority over the style somehow?
  • @Coolcrab I doubt it's Wordpress that's the issue. More likely the theme. You could try being more specific when adding your own CSS. For example, .widget .tagcloud a:hover, which should override the less-specific styling you currently have in the <head>.
  • @Coolcrab or you could use !important, but be wary that your code can get very messy if you use it too much.