Change the background color of visited links in CSS

Why is the code below not functioning?

a:visited {
   background-color: yellow;
} 

taken from: http://www.w3schools.com/cssref/sel_visited.asp

I am attempting to have two links directed at different destinations but sharing the same container. If either link is visited, I want some notification - either a change in background-color or border color.

Example:

<a id="linkA" href="http://www.w3schools.com/">
  <a id="linkB" href ="http://www.w3schools.com/html/">
   <div id="bix">Change content if either link is visited</div>
 </a>
</a>

CSS:

#bix {
   border: 3px solid orange;
}

#linkA #bix {
   border: 3px solid green;
}

#linkB #bix {
  border: 3px solid red;
}

The issue is that when you inspect the code, #LinkA does not encompass #LinkB. How can I nest #LinkB inside #LinkA, or find another method for #bix to respond to visits on either #LinkA or #LinkB.

Answer №1

Using nested anchor tags is not allowed in HTML syntax, which is why they are not being displayed.

Following the recommendation of @beautifulcoder, consider modifying the content itself.

a:visited > #bix { color: red; }

Answer №2

Experiment with:

a:visited + #bix { ... }

Make sure to modify the existing content.

Answer №3

To properly create a hyperlink, follow these steps:

<a href="http://www.example.com">Click Here to Visit the Link</a>

When this hyperlink is clicked, the CSS will change the color as follows:

a:visited{
    color:green;/*changes text color*/
    background-color:orange;/*changes background color*/
}

It seems unnecessary to have two different ways to access the same destination through the hyperlink.

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

Horizontal image scrolling problem across different browsers

Check out my Fiddle. I'm having trouble with scrolling on different browsers. In Chrome, the scroll behaves as expected and stops when the content ends. However, in Firefox, it keeps scrolling even after reaching the end despite setting a fixed width ...

Uniformly allocate space to all table cells

I am facing an issue with the CSS property display: table-cell; and the space between the cells. I want all cells to have dynamically the same width. You can view the code on JSFiddle. As you can see, the cell titled "Ausstattung & Skizze" is wider t ...

Scrolls down to the bottom of the Material-UI popover menu

Trying to incorporate a material-ui popover with a scrollable menu <Popover {...popoverProps}> <Menu className="ui-dropdown-menu">{items}</Menu> </Popover> Custom styles applied: popoverStyle: { height ...

Getting a box-shadow programmatically in Opera can be achieved by using the appropriate CSS

Trying to achieve the same effect with jQuery: item.css("-o-box-shadow") or: item.css("box-shadow") However, the result is an empty string. In Webkit and Gecko browsers it works by using "-webkit" and "-moz" prefixes respectively. How can this be ach ...

Cannot load the next page using jQuery ajax

I am working on a project with an index.html file that includes a nav menu, header, footer, and a div.content where jQuery is used to parse the html of page1.html. Initially, page1.html loads perfectly. However, I encountered an issue when trying to imple ...

Can you explain the purpose of the #shadow-root found within elements?

Today I witnessed something out of the ordinary. Take a look at the images attached to this post. Specifically, pay attention to the input[type="text"] labeled as "1" in the screen picture. The CSS styling for it appears as follows: tab ...

Combining two containers in CSS

I am currently working on building a website design, and I have a menu positioned on the right side of the layout. Below is the code for the menu along with an explanation. #rightmenu { border-top: 1px solid #000000; border-right: 1px solid #00000 ...

Steer clear of using absolute positioning in Material-UI and React for better styling and layout

Is there a way to achieve the same layout without using position: absolute for the "Hello There" button? I want to remove that CSS property while keeping the design intact. Any better suggestions? Feel free to check out my codesandbox: CODESANDBOX -----&g ...

Creating an angular div with rounded corners in the bottom right corner is a simple and stylish way to enhance the look

I've been attempting to design my div to resemble this example, but unfortunately, I haven't had much luck. I experimented with the polygon method to achieve the desired look, but all I managed to create was an angled line that didn't align ...

Tips for Shortening Lengthy URLs using CSS3

When it comes to shortening lengthy hyperlinks, additional server-side tasks such as checking string length and appending ellipsis if it exceeds a certain limit are required. However, this can be achieved effortlessly using CSS3 alone. ...

Interactive Dropdown-Buttons dynamically inserted

I have been utilizing a third-party library called Materializecss from this link: My issue arises when attempting to create a Dropdown feature upon clicking a button. It works perfectly fine when I manually place the button in the HTML and click on it, tr ...

django url path configuration

Hello, I am currently in the process of learning Django and attempting to create a basic site using django-cms. Below you will find the folder structure for my project along with some key code files: project_folder manage.py main_folder ...

Stop bold font weights from affecting line spacing

I am facing a challenge in aligning all lines of text on my website to the baseline grid. The issue arises from the anchors being set to font-weight: bold, which appears to be adding 2px of space above the anchor text. Can anyone suggest a straightforwar ...

Tips for creating a clickable phone number on a WordPress classified website

Despite trying numerous solutions to make the phone number clickable, it still didn't work as expected <?php global $redux_demo;?> <?php $phoneon= $redux_demo['phoneon']; ?> <?php if($phoneon == 1){?> <?php $po ...

Place label at a set position when the mouse hovers over it

I need help creating a simple hover effect on a circle using jQuery. I'm facing an issue where the label location of the city overlaps with the circle when the mouse hovers over it. The label should be fixed in position on top of the red circle. Even ...

Utilizing HTML documents instead of images in Owl Carousel 2

I am currently utilizing owl carousel 2 to construct a basic sliding carousel. However, I am only using images at the moment and would like to incorporate HTML files instead. These HTML files contain multiple divs where images can be inserted, and instead ...

The rel=preload attribute for the stylesheet is not properly rendering the styles after being downloaded

Exploring the use of rel=preload for the first time, specifically for a few stylesheets. Check out the code snippet below: <link rel="preload" href="css/styles.css" as="style"> <link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css ...

Steps to ensure my collapsible is open from the start

Is there a way to have the collapsible content open by default without much hassle? I'm a bit lost here and could use some guidance. I must confess, I'm not very familiar with this, so hopefully, it's not too complicated. While my question ...

Angular ng-repeat can sometimes lead to annoying flickering on the webpage

I have a code snippet that displays a list of thumbnails: <div class ="channel" ng-repeat ="channel in UIModel.channels" ng-class ="{evenchannel: ($index % 2) == 0, oddchannel: ($index % 2) == 1}"> <img class="channel-img" ng-src ="da ...

Efficient Loading with jQuery

Upon page load, I am pre-loading the following HTML: <div>Content for lazy load </div> <div>Content for lazy load </div> <div>Content for lazy load </div> <div>Content for lazy load </div> <div>Content ...