The proper approach is using CSS for linking pseudo-classes

Look what I stumbled upon:

Important: Remember, a:hover MUST be placed after a:link and a:visited in the CSS code to work properly!!

Remember: Place a:active after a:hover for it to have an effect in the CSS code!!

Note: Pseudo-class names are not case-sensitive.

So, does this mean that the following is WRONG?

a:link, a:visited, a:active {
color: #006699;
text-decoration: none;
}

a:hover {
color: #2089CC;
text-decoration: underline;
}

Unfortunately, the reference can be found at: http://www.w3schools.com/css/css_pseudo_classes.asp

If you're unsure why 'unfortunately', please check out

htmlcsspseudo-class

Answer №1

When in doubt, always refer to the official specifications. Here's an excerpt from those specifications.

It is important to remember that the A:hover should come after the A:link and A:visited rules to ensure that the 'color' property of the A:hover rule is not overridden by cascading rules.

Your current implementation is correct.

a:link, a:visited, a:active {
   color: #006699;
   text-decoration: none;
}

a:hover {
   color: #2089CC;
   text-decoration: underline;
}

This is why this example is functioning correctly.

The following code would be incorrect:

a:hover {
   color: #2089CC;
   text-decoration: underline;
}

a:link, a:visited, a:active {
   color: #006699;
   text-decoration: none;
}

This is why this example is not working as expected.

Answer №2

Your suggestion of assigning a style to each pseudoclass does not allow for the overriding of styles by subsequent pseudoclasses. When you group the styles in this manner, they are applied collectively instead of independently.

For instance, the :active pseudoclass is placed last so that it can take precedence over the :focus or :hover pseudoclasses that precede it. This logic makes sense when considering a link becoming active upon being clicked and wanting a new style to apply while the user continues to hover over the link with their cursor.

The correct order should be:


a:link {
  ⋮ declarations
}
a:visited {
  ⋮ declarations
}
a:focus {
  ⋮ declarations
}
a:hover {
  ⋮ declarations
}
a:active {
  ⋮ declarations
}

For further guidance, feel free to check out this resource.

Answer №3

In the CSS 2.1 documentation regarding dynamic pseudo selectors:

It is important to note that the A:hover declaration should come after A:link and A:visited declarations in order to prevent the 'color' property from being overridden by cascading rules. Additionally, placing A:active after A:hover ensures that the active color (lime) will be applied when the user both activates and hovers over the A element.

Interestingly, the current CSS3 draft documentation does not explicitly mention this concept.

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

Which method is more effective: embedding PHP processing code within HTML files, or having forms redirect to separate PHP scripts that ultimately point back to static pages?

I'm in the process of developing a new website, and I'm still learning about PHP. Would it be more advantageous to use .html pages where buttons with Onclick would trigger JavaScript functions that redirect to a PHP page for database interaction ...

phphtml

What are the steps to making a textfield editable with JavaScript and HTML?

My textfield is currently populated with values from the database and is functioning perfectly. I would like to implement a checkbox feature that, when clicked, will clear the textfield of the database values, allowing the user to input new values. If t ...

javascriptphpjqueryhtml

Strategies for creating smooth transitions for elements using CSS transformations

Is there a way to smoothly fade in edits to elements in CSS when hovered over? I am looking to change the border from solid to dotted, but want the transition to be gradual. How can this be achieved? UPDATE: To provide more context, here is the current c ...

htmlcsscss-transitions

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

I'm currently working on a basic animation project using JavaScript. I have utilized the Animation class from the Web Animation API. My goal is to create multiple instances of this class in order to animate different elements with varying values and r ...

javascriptcsscss-animationstypescriptweb-animations-api

Finding the variance in the given situation is as simple as following these steps

To find the variance between the "Total Marks" in a question and the input texts for each answer, we need to consider specific scenarios. Firstly, if a question has only one answer, the text input should be displayed as readonly with the same value as the ...

phpjavascriptjqueryhtml

The Weglot country selector is not properly aligned with the rest of the content and its hover

Our Woocommerce store is now multilingual thanks to the weglot plugin. In the desktop view, we have integrated the country selector next to the shopping cart. For mobile view, we placed the HTML Widget in the header with some surrounding code: <div clas ...

htmlcsswordpresswoocommercetranslation

Achieving horizontal scrolling for tables without using div wrappers

Whenever the width of tables in my articles exceeds the available space in the webpage layout, I wanted to enable horizontal scrolling. Despite trying to accomplish this with CSS alone, I was unsuccessful. As a result, I resorted to enclosing everything i ...

htmlcssoverflowcss-tables

I am experiencing issues with a few of my design choices not functioning correctly

I am facing issues with some of my styles. I have put in a lot of effort, but there seems to be a problem with my menu. The last part of my CSS is not functioning correctly. When hovering over the menu content, I want it to turn black and... #site_menu { ...

htmlcss

Navigating a series of HTTP requests with VBA and saving the retrieved data in Excel 2010

I have a total of 5 Excel files that I currently use with WinHttpRequest to extract data into them. My goal is to consolidate all the requests into a single VBA script, loop through them, and store the data sequentially on one sheet. However, I am facing ...

htmlexcelvbaweb-scraping

Is it feasible to incorporate the CSS and Bootstrap (CDNs) specific to an HTML component without affecting the styling of other pages?

One way I am able to recycle the HTML component is using this code: $.get("nav.html", function(data) { $("#fulloptions").replaceWith(data) }) However, there’s a conflict because nav.html uses a different version of Bootstrap than my index file does ...

htmlbootstrap-4

What is the best way to combine PHP and HTML within a JavaScript script?

I'm facing a challenge with integrating dynamically added elements and a populated drop down on my form. Is there a way to combine the two seamlessly? Below is the code snippet I'm using for dynamically adding and removing elements: $(docu ...

javascriptphphtml

Having issues with Firefox rendering JavaScript and CSS correctly

I'm trying to figure out if it's the row class from Bootstrap that's causing issues, or if there's a problem with my JS/CSS not loading properly in Firefox. It seems to be working fine in Chrome and Safari. Any ideas on what could be go ...

javascripthtmlcsstwitter-bootstrap

Is there a way to substitute all underscores in HTML tag IDs and classes with a hyphen symbol?

I recently realized that I used underscores instead of hyphens in some of my CSS class and id names. To correct this, I want to replace all underscores with hyphens using the sublime text replace feature (ctrl + H). Is there a way to change underscores to ...

htmlcsssublimetext3

Showcasing certain elements as the user scrolls

Looking for a way to display an element (such as a div) when the user scrolls without using JQuery? Here's an example that tries to achieve this: var scroll = document.body.scrollTop; var divLis = document.querySelectorAll("div"); for(let i = 0; i ...

javascripthtmlcss

Navigating Between Web Pages

Hello there! I'm curious to learn how I can establish routing between multiple pages. Specifically, I have an index page and I'd like to navigate to other HTML pages within my views folder. Is it possible to achieve this without relying on the An ...

htmlcssangularjs

The submit button appears as grey on IOS when using the input[type="submit"]

Why does the submit input look different on IOS only, and how can this be resolved? Thank you in advance For HTML: <input class="btn" type="submit" [disabled]="" value="ابدأ الان&qu ...

htmlcss

utilizing the entire string rather than just a portion

I was attempting to create a JavaScript jQuery program that vocalizes numbers based on some previously saved data. However, I encountered an issue where only the last number in the sequence was being played (the final character in the string). Below is t ...

javascriptjqueryhtml

The canvas game's animation can only be activated one time

I am currently working on designing a straightforward canvas game: Here is the code snippet located on CodePen var canvas; var ctx; var x = 300; var y = 400; var r = 0; var mx = 0; var my = 0; var WIDTH = 600; var HEIGHT = 400; function circle(x,y,r) ...

javascripthtmlcanvashtml5-canvas

"Upon loading the page, I encounter JavaScript errors related to Angular's ngOnInit function. However, despite these errors,

I have a page in angular where I am loading data in the ngOnInit function. The data loads correctly and is displayed on the page, everything seems to be working fine. However, I am encountering numerous javascript errors in the console stating cannot read ...

javascripthtmlasp.netangularconsole

Guide on applying CSS to option tag within a select element in VUE.js

I am attempting to design a dropdown menu that resembles the one shown in the image. However, I'm currently unable to include any CSS styling. Can anyone provide guidance on how to create a customizable select dropdown in Vue? https://i.stack.imgur.c ...

javascriptcssvue.js