customize the color of an individual hyperlink

I've been trying to craft a CSS menu bar that features all grey text except for one link, but every attempt I've made so far has resulted in either all grey or all green link text.

As you can see below, the "EcoSolutions" link should be displayed in green while the rest remain grey.

Here's my most recent attempt... hopefully someone can help me solve this dilemma :D

Thank you!

<ul id='Navigation' class='MenuBar'>
    <li><a href="../index.php">Home</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../simplify.php">Simplify</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../ecosolutions.php"class="green">EcoSolutions</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../contact_us.php">Contact</a>
        <img src='images/separator.jpg'/></li>          
    <li><a href="../partners.php">Partners</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../services.php">Services</a>
        <img src='images/transSeparator.png'/></li>
</ul>

/****  MenuBar STYLES ****/

.MenuBar
{
    width: 916px;
    padding: 0px 0px 0px 50px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    color: #888;
}
.MenuBar ul
{
    list-style-type: none;
    font-size: .9em;
    cursor: default;
    font-weight: bold;
    padding: 10px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    font-family:Verdana, Geneva, sans-serif;
    color: #888;
}

.MenuBar ul li img
{
    padding: 0px 0px 0px 0px;
    margin: 0px 25px 0px 25px;
    vertical-align: middle;
}

.MenuBar li
{
    list-style-type: none;
    font-size: .9em;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    float: left;
    height: 37px;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    top: auto;
    bottom: auto;
    font-family:Verdana, Geneva, sans-serif;
    color: #888;
}

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}
.MenuBar  ul li a:link, a:visited, a:active 
{
    display: inline;
    cursor: pointer;
    color: #888;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

.MenuBar  ul li a:hover 
{
    display: inline;
    color: #FF0000;
    padding: 0px;
    margin: 0px;
}
css

Answer №1

Make a simple adjustment

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

Switch to this

a.green:link, a.green:visited, a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

Answer №2

After Catfish's suggestion, it appears that your CSS selectors for the links are inaccurate. It is necessary to include the class in a compound selector.

You should also adjust the style of the non-green links, such as:

.NavigationBar ul li a:link, 
.NavigationBar ul li a:visited, 
.NavigationBar ul li a:active {
    /* custom styles here */
}

The issue with this approach is that these selectors will affect the green link, and by being more specific, they will override the green link selectors as mentioned by Catfish. As a result, there needs to be a revision to make them as specific as the standard link selectors.

.NavigationBar ul li a.green:link, 
.NavigationBar ul li a.green:visited, 
.NavigationBar ul li a.green:active {
    /* custom styles here */
}

I hope this clarification is beneficial!

Answer №3

Take a look at my note ... however 

.NavBar ul li a.blue { color: blue; }

this could be the solution.

Answer №4

In summary, make the following adjustment:

<li><a href="../ecosolutions.php"class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

Change it to this (pay attention to the space between href="" and class="")

<li><a href="../ecosolutions.php" class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

Then in your CSS, update the following (the current code implies having a <a> element inside another element with the green class, like <div class="green"> which is not consistent with your HTML structure)

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

Replace it with:

a.green:link, a.green:visited, a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

For a more specific targeting, you can use:

.MenuBar ul li a.green:link, .MenuBar ul li a.green:visited, .MenuBar ul li a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

I hope this explanation clarifies things for you.

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

Is there a way to trigger a CSS3 animation to play when scrolling down and then play in reverse when scrolling up?

Using a blogger website, I have successfully set up sticky navigation. However, when scrolling back up, the navigation bar pops back into place without any animation. I am looking for a solution to smoothly return the navigation bar to its original positio ...

javascriptjqueryhtmlcss

Transition effects in CSS when hovering

I've run into an issue where I'm attempting to create a hover transition effect on a div when the mouse hovers over it. The idea is that hovering over the main div should trigger another div to appear above it, with a smooth transitioning effect. ...

htmlcss

Tips for adding an active class when a link is clicked

I am working on a Sidebar component and need to apply the active_class_link style to the DIV element when the onClick() event occurs. Although I have set up the function, I am unsure how to apply this for each DIV within my component. The desired behavior ...

javascripthtmlcssreactjs

What is the process for importing css and js files in laravel-webpack when utilizing a newly installed package through composer?

I've been working on installing this package called phackage. You can find more information about it here. After successfully installing it with Composer PHP, I've encountered several errors because I'm using Laravel 5.4 with Webpack 2 and ...

javascriptphpcsswebpacklaravel-5.4

Trouble with CSS hamburger menu icon appearance in IE9

After implementing a 'hamburger' menu icon on my website's header using only CSS3 code from codrops, I noticed that in the latest Chrome and IE11 it works perfectly. However, when testing in IE9 (which is used at work), only one of the 3 lin ...

cssinternet-explorer-9pseudo-classhamburger-menu

What causes jquery height and javascript height to both be returned as 0?

I'm facing an issue with a visible div on my screen - despite being visible, its height always returns as 0. I've attempted various jQuery and JavaScript methods to retrieve the height, but it consistently shows as 0. Here's the structure of ...

javascriptjqueryhtmlcss

Ways to show a div above another div when clicked

Does anyone know how to create an overlay effect that appears after clicking a button? I want it to look like this before the triangle at the bottom is clicked: And then after it's clicked, the design should change to this: I have a feeling jQuery c ...

jqueryhtmlcss

It is impossible to evenly divide a div into 6 equal parts

I am facing an issue with my code where it splits a div into six equal parts. It seems to work fine on desktop browsers, but on Safari/Chrome on iOS, it doesn't display correctly. You can check the code here In my desktop browsers, each div has a h ...

htmlcssmobile-safari

What's the best way to align the hamburger menu to the left in Foundation CSS framework

My experience with SASS is still in its infancy, and I have encountered some issues. According to the documentation, I should make changes to _top-bar.scss by adding the line: $topbar-menu-icon-position: $default-float; (rather than $opposite-direction;). ...

htmlcssmenusasszurb-foundation

Looking for an Icon to accompany the navigation bar on Bootstrap

Can anyone assist me with adding an icon next to the navbar starting from the word "Dashboard" without any spacing using only Bootstrap? Please note that I have tried options like offset-5 and ms-5 but they did not achieve the desired result. <div id=& ...

htmlcssbootstrap-5

jQuery functions correctly within jsfiddle, yet it encounters issues when utilized within WordPress

I've been experimenting with a jQuery script to grey out the screen. While it works perfectly on my jsFiddle link provided below, I'm having trouble getting it to work from within my WordPress plugin. Check out the working script on my jsFiddle ...

javascriptjqueryhtmlcsswordpress

How to align all children at flex-start while positioning one child at the end?

I am currently working on a flex container that has 3 children. My goal is to have all the children align at flex-start, with the final child positioned at the bottom of the container. Can align-content be combined with align-self to achieve this layout? ...

cssflexbox

The issue with EJS Header and Footer not showing up on the

I am currently building a basic todo list application using EJS. However, I am encountering an issue when running it. I would like to run app.js with the header and footer in EJS, but it seems that it is not recognizing the header despite using what I beli ...

javascripthtmlcsslayoutejs

What could be the reason for lxml not being able to locate this class?

Trying to extract text from a webpage using Python has always been tricky, especially with the surprises lxml tends to throw. Here's what I attempted: >>> import lxml.html >>> import urllib >>> response = urllib.urlopen(&a ...

pythoncssweb-scrapinglxml

Switch between webpage design for different devices (mobile/desktop) using javascript, jquery, and bootstrap

I am currently working on a webpage that contains various html elements with bootstrap classes applied to them. <div class="col-xs-12 col-lg-4"></div> My goal is to implement a button that, when clicked, will toggle the viewport/layout change ...

jquerycssresponsive-designbootstrap-4viewport

Eliminating classes with jQuery through the use of logical operators

I have been trying out some experiments and I got curious if there is a way to eliminate a class from a div in all divs except the specified one: $(function() { $('#tab-2').click(function() { ...

jquerycss

Using the .slider class on concealed div elements

Explaining this may be a bit tricky, but here we go... I have multiple hidden divs that switch with each other when a link is clicked using $(document).ready(function(){ $('a').click(function () { var divname= this.name; $("#"+divname ...

jquerycss

I am experiencing difficulty with my background image loading as it requires a specific pixel value for height

Having trouble loading an image as a responsive background image in my CSS. Here's the code I'm using: .cover{ height: auto; width: 100%; background-image: url(../img/cover.jpg); background-repeat:no-repeat; background-size:c ...

htmlcssbootstrap-4

Two Bootstrap modals with customized maximum width and height dimensions

I'm working on designing 2 modals for a Bootstrap themed webpage. https://i.sstatic.net/N4gNl.png One of the modals, the wider one, has been successfully created. Below is the CSS code: .modal-dialog { width: auto; height: auto; positio ...

htmlcsstwitter-bootstrap

Using Responsive Design with Bootstrap and Media Queries

As a beginner in front-end development, I have recently learned about media queries and their functionality. Having previously studied Bootstrap, I can't help but wonder if media queries are actually necessary. After all, Bootstrap seems to offer simi ...

csstwitter-bootstrapwebfrontendmedia-player