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

Content move to the left with Material UI's shifting capabilities

Is anyone experiencing an issue with Material UI dropdown Select and Modals causing the content to shift to the left? I attempted using position: absolute on both the Select element and MenuItems, but unfortunately the content still shifted. Has anyone e ...

cssreactjsmaterial-ui

How to Retrieve Data from an HTML Table using the Laravel Framework

I have a unique and interactive Dynamic Sortable Table where I can effortlessly add or delete rows likethis uploaded image here. There is an intriguing loop in my controller that runs precisely 4 times, based on the number of columns in the table. However, ...

phphtmlmysqllaravel

Struggling with applying mixins

Is it possible to select only the top border using this mixin? Currently, I only need a top border but would like to have the option to use others in the future. Using separate mixins for each side of the border seems inefficient. .bordered(@top-width: 1 ...

csslessmixins

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function

Is there a way to create a function that continuously changes the background color every 15 seconds by picking colors from an array that starts over once all colors have been used, without having the function run just one time? $(document).ready(() => ...

javascriptjquerycss

What causes a webpage to overflow when using the position:absolute property?

Despite my understanding that an element positioned absolutely should be removed from the normal content flow, why does it still cause the page to overflow? Running the code snippet below reveals a horizontal scrollbar, which I didn't expect. .rela ...

htmlcsscss-position

To link circles vertically with a line and fill them with color when clicked, follow these steps:

I am looking to create a design similar to the image below using unordered list items. When a user clicks on a list item, I want the circle to fill with color. I have structured it by creating a div with nested list items and span elements. If a user click ...

javascriptjqueryhtmlcss

Scroll bar displayed on a non-editable text box

The TextArea is currently set to readonly mode using "ng-readonly," which is causing the scrollbar-thumb not to appear. It's important to note that I am not utilizing webkit in this scenario. Below is the HTML code being used: <textarea dataitemfq ...

javascripthtmlcss

Issue with JQuery Ajax form causing unexpected page refresh in Safari but not in Firefox (working properly)

Currently, I am working on an AJAX form that is housed within a JQUERY UI Dialog. Everything runs smoothly in FireFox; however, there seems to be a glitch in Safari as it refreshes the page to: /? If you notice any discrepancies or errors here, please do ...

jqueryhtmlajaxformssubmit

Trouble aligning content in CSS? Try using justify-content center for perfect centering!

I am facing an issue with centralizing the content properly. Despite using justify-content:center, the layout breaks. When I apply justify-content:center, the layout appears like this: Here is the HTML / JSX code snippet: <div className={styles.co ...

htmlcssreactjs

Angular components are not receiving the Tailwind CSS attributes applied to :root classes

In my Angular 12 project, I have integrated Tailwind CSS. The structure of the package.json is as below: { "name": "some-angular-app", "version": "0.0.0", "scripts": { "ng": "ng&quo ...

javascripthtmlcssangulartailwind-css

Issue with nivo-lightbox not opening upon clicking image

I have diligently followed the instructions to set up this JavaScript plugin, but unfortunately it doesn't seem to be functioning properly. The plugin I'm using can be found here: All the links to the CSS, theme, and JavaScript files are display ...

javascriptcsslightboxnivo-slider

Implementing text overlays on images within a Bootstrap 4 navigation bar

I am struggling to grasp the flex structure in Bootstrap. I'm attempting to overlay text on an image within the navbar, but it seems the container of the navbar is causing issues. Perhaps my containers are not set up correctly. Any assistance would be ...

htmlcsstwitter-bootstrapbootstrap-4

Executing a function upon the loading of a template in AngularJS

I have been searching through various responses here, but I haven't come across one that addresses my specific problem. Apologies if this has already been answered. I am a beginner in angular js and have recently begun working on angular routing. I am ...

jqueryhtmlangularjsngroute

Modifying an HTML list item to become 'active' in a navigation bar

One way I've been implementing my navbar on each page is by using the following code at the bottom of the page within script tags: $("#navbar-partial").load("navbar.html). The code for the navbar list looks like this: <ul id="main-nav" class="nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

Retrieving Data from Web using Python Selenium

I've been trying to extract information from a website (snippet provided below) The process involves entering data, moving to another page for more inputs, and eventually displaying a table. However, I'm encountering an issue at this stage: dri ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Steps to Deactivate Dates in React Beautiful Dates Component

I found this amazing Calendar library at . Within the library, I am utilizing the <DatePickerCalendar /> component. Currently, I have stored three dates in an array: [date1, date2, date3] My goal is to disable these specific dates in the calendar s ...

javascripthtmlreactjs

Automatic Full-Screen Switching Upon Video Playback in HTML5

Currently, I have a video clip set to play when the timer reaches a certain point. My goal is for the video to automatically enter full-screen mode when it starts playing and return to its original position when it stops, as the timer will continue ticking ...

javascriptjqueryhtmlcssvideo

Restricting Horizontal Scrolling in Dash DataTable with multi-tiered header (without any additional empty gaps)

I'm currently developing a Dash application using Plotly that showcases two tables, specifically dash_table.DataTable, each with multiple columns. The initial table features a multi-level header. For both tables, the first few columns are fixed while ...

pythoncssplotly-dash

Separate JavaScript/ASP statements using commas

I'm having trouble comma-delimiting this line in JavaScript, as I keep encountering errors: <a href="javascript:doSubmit(<%= pound & rs("AdvertiserID")%>, <%=rs("AdvertiserName")%>)"> It's Friday, what can I say... The &l ...

javascripthtmlasp-classic

Choose to automatically update the page after adding new information

The information is displayed in this format: <select class="custom-select col-md-10" id="routeList" size="8"> <option selected>Choose...</option> <?php include( '../cnn.php' ); $query= $db ...

phpjqueryhtmlajax