Is it possible to change the color of a hyperlink without assigning it a class?

Here is the CSS code I am using:

.menu_2_1 ul {
    float:left;
    list-style-type:none;
}
.menu_2_1 ul li {
    float:left;
    display:inline-block;
    width:auto;
    height:55px;
    margin-left:20px;
    padding-top:25px;
}
.menu_2_1 ul li a:link, 
.menu_2_1 ul li a:visited, 
.menu_2_1 ul li a:hover, 
.menu_2_1 ul li a:active {
    text-decoration:none;
    font-size:1.70em;
    color:grey;
    padding:25px;
}
.activeLink {
    background:lightblue;
    color:red;
    font-size:1.80em;
}

And here is how I have structured my HTML:

<div class="colm menu_2_1">
    <ul>
        <li class="activeLink"><a href="#1">Link1</a>
        </li>
        <li><a href="#2">Link2</a>
        </li>
        <li><a href="#3">Link3</a>
        </li>
    </ul>
</div>
<!--colm menu_2_1-->

I wanted to use the "activeLink" class on the links in order to easily add and remove it later with jQuery. However, I noticed that while the class changes other style properties like text decoration and font size, it doesn't change the font color.

Why do you think that is happening? Could it be related to CSS specificity?

Thank you for your help!

css

Answer №1

You've already provided the answer... specificity

.menu_2_1 ul li a:link is more specific than .activeClass

The solution is to use .menu_2_1 ul li.activeLink a.

Take a look at the demo.

Answer №2

In order to make the necessary changes, you will have to modify either your css or html code.

If you choose to alter the html code:

<li><a class="activeLink"...

To change the css:

.activeLink a{color:#f00;}

It might be beneficial to provide a more specific selector since there are other rules affecting the links.

A more specific css solution could be:

div.colm menu_2_1 ul li.activeLink a{}

Alternatively, if you update your html:

div.colm menu_2_1 ul li a.activeLink{}

Or for a quick fix, you can use !important in the css like this:

For example:

.activeLink{color:#f00!important;}

Answer №3

We must once again prioritize the issue and update the CSS selector to .menu_2_1 ul li.activeLink a.

.menu_2_1 ul li.activeLink a{
    background:lightblue;
    color:red;
    font-size:1.80em;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a curve using two distinct colors in JavaScript

I am currently experimenting with a canvas and I have a specific challenge in mind. My goal is to draw an arc using two different colors, where the first half of the arc will be green and the second half red. Check out the code snippet below: // CANVAS co ...

javascriptcsscanvas

What is the best way to incorporate three distinct conditional border colors?

I am trying to customize an icon button by having three different border colors - one for the regular state, one for when hovering, and another for when the icon is clicked. Currently, I am working with React and have a function that checks if the curren ...

htmlcssreactjsmaterial-ui

Utilizing CSS to set a map as the background or projecting an equirectangular map in the backdrop

How can I set an equirectangular projection like the one in this example http://bl.ocks.org/mbostock/3757119 as a background for only the chart above the X-axis? Alternatively, is it possible to use an image of a map as a CSS background instead? .grid . ...

javascripthtmlcsssvgd3.js

Responsive design not functioning properly for Bootstrap columns on website

If my display currently looks like this with three equally distanced images at the top and two images at the bottom, how can I achieve that design? I attempted using Bootstrap by setting the top 3 images as <div className="col-md-4"> and t ...

htmlcssreactjsbootstrap-4

Using jQuery's .append() method within a for loop

As a newbie in JavaScript, I've been trying to find answers to my questions, but the solutions I've come across are quite complex for my level of understanding. One specific issue I'm tackling involves creating a grid of divs using user inpu ...

javascriptjqueryhtmlcss

Using CSS animations to animate a div while creating a subtle pause between the two

I am working on creating a notification bar that will be displayed and hidden using CSS animation. My challenge is finding the right delay between the two animations. HTML <div id="notification" class="alert" role="alert"></div> JS $(' ...

jqueryhtmlcssanimation

Swapping out data within a container

I've been experimenting with creating a hangman game using JavaScript and HTML. However, I'm facing an issue where clicking on a letter doesn't replace the "_" placeholder. var myList=["Computer","Algorithm","Software","Programming","Develop ...

javascripthtmlcss

The issue at hand is that one of the JavaScript buttons is functioning properly, while the other is not playing the video as intended. What steps can

I've been working on a script for my school project website that should make buttons play videos, but I'm running into an issue where it only works for the first button (btn). Programming isn't my strong suit, and I put this together based o ...

javascripthtmlcssvideo

Why isn't the class applying the color to the Angular span element?

My Angular application generates text that needs to be dynamically colorized. To achieve this, I inject a span element with a specific class into the text output like so: Some text <span class="failResult">that's emphasized</span> and oth ...

htmlcssangular

"Customizing the topbar of Twitter Bootstrap for right-to

Attempting to implement twitter bootstrap for a top navigation bar on my master page. http://jsfiddle.net/ZqCah/1/ Encountering some issues and seeking assistance: 1- Desiring to switch the direction of all content to right-to-left (rtl). This would me ...

htmlcsstwitter-bootstrap

Tips for aligning inputs vertically and stretching them horizontally with bootstrap flex only

For a practice exercise, I want to achieve vertical left alignment and horizontal stretching of input fields using only Bootstrap Flex (or CSS3 flexbox), without relying on Bootstrap Grid or CSS3 grid layout. Here is the code snippet (also available on co ...

htmlcssbootstrap-4flexbox

Creating a centered vertical border in Tailwind between two divs can be achieved by following these steps

Hey there, I'm working on creating a timeline and I'd like to have a line intersecting each year similar to this example. My tech stack includes tailwind CSS and next.js. Although I've written some code, I can't seem to get the line ce ...

htmlcssreactjsnext.jstailwind-css

The most sophisticated method for creating a 2x2 grid of divs

I have developed a quiz application similar to Buzzfeed with four answer options for each question. The layout on mobile devices is satisfactory, displayed in a 2x2 grid. However, when viewing the app on desktop screens, the answers appear horizontally in ...

htmlcssangularjs

Arrange a trio of cards in a row with dynamic alignment

I'm having trouble aligning the cards next to each other. I've written the code below but for some reason, they're not displaying next to each other. What I'm trying to do is call a REST API and get back a list of data. I want to loop ...

jqueryhtmlcssrestbootstrap-4

Use the jQuery library to detect scrolling and toggle the CSS class between 'selected' and

I am trying to dynamically add the "selected" class to a[href] when a specific DIV comes into view while scrolling. However, I want to remove this class completely once the DIV has been scrolled past. const links = $(".cd-faq-categories li a"); // Find al ...

javascriptjqueryhtmlcss

Text randomly appears on the html page

I've been dedicating a significant amount of time to finding a solution, but haven't had any luck. I'm aiming to create a visual effect where 10 words with varying font sizes slide in from different directions on a canvas within my document ...

javascripthtmlcsscanvashtml5-canvas

Issue with a Jquery toggleClass function not working properly on hover

Hello everyone! I am a newbie in the community and relatively new to the world of web programming. I am encountering an issue that is really frustrating me. I attempted to use this code to add a class when hovering over the ul list element so that I can d ...

javascripthtmljquerycssfrontend

Arranging images and their descriptions side by side in CSS and HTML

I am facing an issue with a row containing 5 images and descriptions below them. If the descriptions do not have the same width, the images do not stay on the same row anymore; they go up and down. Here is my current setup: https://i.sstatic.net/c9smB.pn ...

htmlcss

Having trouble with the contact form? It seems to be experiencing issues with

Hey there! I'm encountering an issue with the following codes, where I'm getting redirected and receiving an error message stating "Undefined variable: subject in C:\wamp\www\boot\send.php on line 42." Any help would be greatl ...

phphtmlcss

The sequence of loading styles is respected, yet Bootstrap continues to take precedence over the WordPress child

After putting together a WordPress child theme that correctly displays Bootstrap and child-styles.css in the source code, I encountered an issue: View Source Code Stylesheet Order Upon inspecting with Chrome, it's apparent that the color of my link ...

htmlcsswordpresstwitter-bootstrapbootstrap-4