Maintain the menu item color even after clicking

Here is the menu code snippet:

<div class="header">
        <div id="logo"></div>
        <ul class="menu">
            <li><a href="/index.aspx">Home</a></li>
            <li><a href="/about.aspx">About</a></li>
            <li><a href="/contact.aspx">Contact</a></li>
        </ul>
    </div>

This CSS class is used:

.header {
    margin:20px 0 55px;
    height:68px;
    width:inherit;
}

How can I modify either the menu tag or the CSS class to keep the link color consistent, without changing when clicked? Currently, the link appears blue and then changes to purple once clicked. I want it to remain black at all times, whether clicked on or not.

Answer №1

Quoting the specs is always a reliable way to explain:

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */
a:active  { color: gray }   /* when element accepts tab focus */

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

This code snippet should handle all scenarios:

.header a,
.header a:link,
.header a:visited,
.header a:active,
.header a:hover {
    color: black;
}

http://jsfiddle.net/ZgUZn/1/

A comment by Joerg mentioned that :focus was left out, but there's a reason for it. You can decide if you need it or not after understanding why:

.header a:focus {
    color: white;
    background: blue;
    font-size: 2em;
}

http://jsfiddle.net/ZgUZn/5/

If you visit the link and follow the instructions, you'll see how focus affects the element. Including this pseudo-class can be optional depending on browser defaults.

NOTE: There's a possibility that just using .header a could also suffice, although it may not cover all cases as effectively as the previous method. Your feedback on this is appreciated.

EDIT

Regarding the earlier note, here's an alternative approach:

a,
a:link,
a:visited,
a:hover,
a:active {
    background: green;
    color: white;
    font-size: 2em;
}
.header a {
    color: black;
}

http://jsfiddle.net/ZgUZn/6/

The use of .header a doesn't always override other pseudo-selectors if they've been defined elsewhere. It seems to work against the default browser settings when no other definitions exist, but further testing might be needed.

Answer №2

Browser automatically assigns default colors for visited and unvisited links. To avoid this, simply style the anchor tags as desired.

.header a {
    color: black;
}

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

Difficulties encountered when trying to send emails on iPhone with HTML formatting and attachments

I'm attempting to send a JPG attachment along with a formatted HTML message using [picker setMessageBody:emailBody isHTML:YES]; as recommended by several forum posts. However, what I've noticed is that the resulting email's content varies d ...

Encountering issues with styling the search bar using CSS and unable to see any changes reflected

I am currently working on creating a searchBar and customizing its CSS, but unfortunately, most of the styling properties seem to not be taking effect. So far, only changing colors seems to work as expected. .mainBar{ background-color: blue; width: ...

Display a list next to a block of text and image using HTML and CSS styling

I am having trouble with keeping a navigation list aligned inline with a block of text that includes an image. My issue arises when I expand the browser to full screen size, causing the list to overlap the text block. Here is the HTML code snippet: <bo ...

How can we focus href on a <div> using CMS in PHP?

I am currently in the process of learning PHP and simultaneously tackling a redesign of a custom CMS. The CMS is written in PHP, and I have already revamped the default menu using CSS to incorporate a side slide effect. However, my next challenge is to en ...

Can we not customize a nested component using the 'styled()' function in MUI?

Looking at the code snippet below, my attempt to style an MUI Stack component within an MUI Dialog component seems to be falling short. The Stack styles are not being applied as expected: const CustomDialog = styled(Dialog)(({ theme }) => ({ ' ...

Displaying data in an HTML table using PHP and adding a popup

I've successfully created a PHP script that retrieves data from a MySQL database and organizes the results into an HTML table. Within one of the fields in the database, there are links to file(s), separated by commas. Everything is working well thanks ...

Concealing the TinyNav Drop-Down Menu

Currently, I am utilizing TinyNav on my website and it is working wonderfully. However, due to our extensive menu system, the tinynav dropdown appears quite large. I have been attempting to figure out a way to hide all sub-menus without success. I experim ...

Exclude striped tr elements within a subtable

I have a main table (Maintable) containing information, with each row having a sub-table for additional details that can be collapsed if needed. I am trying to stripe the rows in the Main table but using `tr:nth-child(even)` is not working as it also affec ...

On iPhone, links located under a fixed-positioned div can be easily clicked

I am facing an issue on our mobile website where the footer with fixed positioning overlaps with a scrolling feed underneath it, causing the links in the feed to be clickable from the footer area. Footer CSS: .footer { position: fixed; bottom: 0; right: ...

Div scrolling allows for parallel viewing of PDFs in a side by side arrangement

I have two scrollable elements on my webpage: one positioned on the left side and the other on the right side. The left element is a regular div, while the right element is an object containing an embedded PDF. <object width="100%" height=&quo ...

How can I adjust the size and alignment of each line within a single cell in an HTML table?

<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <style> .chess-board { border-spacing: 0; border-collapse: collapse; } .chess-board ...

How can I upload a file using the following HTML script with Selenium in Python?

I attempted to utilize the send_keys() method directly on an attached path file, but encountered an error. Can anyone provide guidance on how to properly upload a file? Here is my Selenium Python script: from selenium import webdriver from selenium.webdri ...

Scrolling through four limited list items automatically

Hey there! I am currently working on a design project. You can check it out here. I'm trying to replicate a section from another site, which you can see here. <div class="latest-winners-container"> <h3 class="header">Latest Winners< ...

Moving a mouse from one element to another does not reset its state

Link to code: https://codesandbox.io/s/objective-darwin-w0i5pk?file=/src/App.js Description: There are four gray squares in this example, each with a different shade of gray. The goal is to change the background color of each square when the user hovers o ...

List the acceptable favicon formats for Internet Explorer version 10 and above

When I say type, I'm referring to the file extension. My favicon displays correctly in Firefox, Chrome, and Safari, but someone suggested that the issue may be related to the favicon type. Is there a reliable online resource where I can find informa ...

Running a Chrome content script once an AJAX request has been triggered by the <body> element

I am facing a challenge with running the content script before the DOM is fully loaded. To give context, there is an AJAX request within a tag which gets triggered on $(document).ready(). Once this request is completed, my extension code kicks in. To tra ...

When using equal-width columns in Bootstrap, the columns will be stacked one on top of the other

When I utilize Bootstrap 5, I am encountering an issue where equal width columns are being displayed one underneath the other. To illustrate, here is a simple example directly from the Bootstrap website: <link rel="stylesheet" href="https://cdn.jsd ...

Providing input through the URL bar in PHP and HTML

I have a simple form on my website's HTML page. <form action="post.php" method="post"> Message: <input type="text" name="message" /> &nbsp; <input type="submit" name="submit" value="send"> </form> After submitti ...

How to disable CSS transition on Angular 4 component initialization

I am facing a major issue with css transitions and Angular 4. The problem arises when using an external library that includes an input counter feature. Despite knowing that no additional styling is being applied to the wrapped input, the application has a ...

JavaScript: Selecting parent elements using getElementsByClassName

I am dealing with the following HTML code: <div class="item"> <img class="item-image" src="${item.getImage()}"/> <p>${item.getName()}</p> </div> and JavaScript: var classname = document.getElementsByClassName("item" ...