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

Is it possible to utilize LESS to dynamically read the width?

My LESS code looks like this: &.settings-prompt .panel { margin-left: -190px; width: 380px; height: 200px; } &.create-playlist-prompt .panel { margin-left: -165px; width: 330px; height: 180px; } I want the .panel to have ...

Adding a <tr> tag to an HTML table using JQuery and AJAX in the context of Django framework step by step

I am currently navigating the world of Javascript, Jquery, and Ajax requests and I'm encountering a challenge with how my scripts are executing. My homepage contains a lengthy list of items (over 1200) that need to be displayed. Previously, I loaded ...

Utilizing Regular Expressions for extracting data from an HTML webpage

Is it possible to extract the response "Here is the solution" from an HTML document using Regular Expression? <b>Previous Query:</b> <b>Here is the answer</b> ...

Navigate to a fresh web page without encountering any script loading issues

I am currently working on a web application that loads new pages without requiring the browser to reload. While some pages load perfectly fine, others are causing errors due to missing scripts. The code snippet below is used to load a new page: function lo ...

What can I do to enhance the responsiveness of this rotating cube?

Here I am working with a rotating cube on the web. Check out my similar code. I am attempting to make it so that when the browser size is reduced, the table and cube also shrink in size accordingly without changing their position relative to each other. I ...

Utilizing Python's Requests Library to Submit a Form without Specifying Input Names

My task is to perform a POST request using the Python Request module. However, I am facing an issue where the input I need to work with only has an id attribute and no name attribute. Most of the examples I have come across involve using the name attribute ...

Firebug displays the class name and location twice in the right panel

When examining a div labeled with .mlm-clearfix, I noticed that Firebug was displaying this class name and its URL twice in the right panel. The style declarations given for the Easy Clear Method in relation to this class are as follows: .mlm-clearfix:bef ...

issue with padding-bottom in Firefox and Internet Explorer 11

JsFiddle CSS body, html { background: violet } * { margin: 0; padding: 0 } .fixed { height: 100%; width: 300px; background: #fff; right: 0; position: absolute; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; ...

Ways to gradually reveal all elements within a header section

Is there a way to gradually reveal all the components in my header once the window has finished loading by utilizing jQuery's fadeIn function? Below is the pertinent code snippet: HTML <div class="banner"> <header class="header"> < ...

Getting the draggable events area from the database in fullCalendar: A step-by-step guide

Currently, I am in the process of developing fullCalendar drag-and-drop events with a resource column. Initially, I hardcoded the draggable events area and now I am working on retrieving it from the database. Previously, the database had two tables - Resou ...

What is the best way to ensure that all the divs within a grid maintain equal size even as the grid layout changes?

I have a grid of divs with dimensions of 960x960 pixels, each block is usually 56px x 56px in size. I want to adjust the size of the divs based on the changing number of rows and columns in the grid. Below is the jQuery code that I am using to dynamicall ...

What are some ways to optimize the use of the jquery.mCustomScrollbar.js script?

I have a myriad of inquiries and would greatly appreciate your assistance in addressing them. Despite spending countless hours attempting to solve the issue independently, I have been unsuccessful. One question that plagues me is why, when using Google Ch ...

I am trying to display my progress bar in a col-sm-6 format on screens larger than 546px, however, despite my attempts, I am not seeing any changes on the screen

Is there an alternative method if bootstrap is unable to handle this? I have used col-xs-6, but all I want is to display my progress bar in the image shown on small screens. Here is how I want to display my image on small screens. <div class="cont ...

Please retain only the clean <p> elements using Jsoup and remove all other content

I'm struggling to figure out a simple solution for this problem. My elements consist of a mix of <p>, p class="example">, and <p><strong>...</strong></p>. All I want to do is preserve everything within the clean < ...

What is the process for loading the chosen option JSON object from an array when a button is clicked?

I have a TypeScript file containing JSON objects that can be selected as options from a dropdown list. I am looking for guidance on how to load/instantiate the selected JSON object when the user clicks a button to proceed. Specifically, I would like to le ...

Verifying StartDate and EndDate using AngularJS and Bootstrap Datepicker

My HTML Coding <form name="myForm"> <div class="row"> <div class="col-md-2"> <input data-ng-model="Data.StartDate" type="text" id="startDate" name="startDate" class="form-control" data-da ...

"jQuery enables hover effects to be applied to elements that are not directly related

I'm attempting to achieve an effect where an element will show or hide when I hover over a completely different element. Currently, my approach involves using lists and indexes so that the nth item in list 2 changes when the nth item in list 1 is hov ...

Using jQuery Ajax to Retrieve Inner Text from Elements

Looking for a solution with PHP file output like this: <div id="title">Add Us On Myspace!</div><img id="image" src="http://i39.tinypic.com/67jybs.png" alt="Add Us On Myspace!" /> The code to retrieve and display this is as follows... $ ...

Changing the color of asterisks for required fields in WooCommerceWould you like to modify

Looking for a solution to change the color of the asterisk (*) in required fields on WooCommerce forms due to accessibility issues flagged by WAVE scan. Does anyone know of a CSS code that can help with this? ...

Is there a way to automatically calculate the sum of two boxes and display the result in a separate

I am working with two boxes: one is called AuthorizedAmount and the other is called LessLaborToDate: <div class="col-md-6"> <div class="form-group"> <label>Authorized Amount</label> <div class="input-group"> & ...