Using CSS to target the last child and hover states of an anchor link within an unordered list

I am currently adding styles to the last child of a navigation menu, and I have been successful with this code:

.aston-menu-light ul > li:last-child {
    border:2px solid blue;
    border-radius: 50px;
    padding:0 20px 0 20px;
} 

.aston-menu-light ul > li > ul > li:last-child {
    border:none !important;
    padding:0 !important;
} 

.aston-menu-light ul > li:last-child:hover {
    background-color:#ffff;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

However, I am encountering an issue when attempting to target the <a> tag of the last child on hover. I am using the following code for this:

.aston-menu-light ul > li > a:last-child:hover {
    color:red !important;
}

Unfortunately, it seems to be applying the style to all <a> tags instead of just the last child. I have experimented with different variations such as ul > li a, but I cannot seem to get it to work correctly.

You can view my Codepen here: https://codepen.io/shaun-taylor/pen/LXdGGN

The main objective is to make only the last link in the top level turn red when hovered over. Thank you for taking the time to read!

htmlcsscss-selectorshoverhref

Answer №1

it is recommended to make a modification

.aston-menu-light>ul>li:last-child > a:hover {
    color:red !important;
}

from

.aston-menu-light ul > li > a:last-child:hover {
    color:red !important;
}


/* CSS Document */


a {
color: black;
}

nav {
margin: 50px 0;

}

nav ul {
padding: 0;
  margin: 0;
list-style: none;
position: relative;
}

nav ul li {
display:inline-block;
}

nav a {
display:block;
padding:0 10px;
color:#black;
font-size:20px;
line-height: 60px;
text-decoration:none;
}


/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute; 
top: 60px; /* the height of the main nav */
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}

/* Second, Third and more Tiers*/
nav ul ul ul li {
position: relative;
top:-60px; 
left:170px;
}


/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

.aston-menu-light ul > li:last-child {
border:2px solid blue;
border-radius: 50px;
padding:0 20px 0 20px;
} 

.aston-menu-light ul > li > ul > li:last-child {
border:none !important;
padding:0 !important;
} 

.aston-menu-light ul > li:last-child:hover {
background-color:#ffff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
} 

.aston-menu-light>ul>li:last-child > a:hover {
color:red !important;
} 
<nav class="aston-menu-light">
    <ul>
        <li><a href="#">link</a>
          <!-- First Tier Drop Down -->
          <ul>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
          </ul>
        </li>
        <li><a href="#">link</a>
          <!-- First Tier Drop Down -->
          <ul>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
          </ul>        
        </li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a>
          <!-- First Tier Drop Down -->
          <ul>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
          </ul>
        </li>
        <li><a href="#">link</a>
          <!-- First Tier Drop Down -->
          <ul>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
          </ul>
        </li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</nav>

Answer №2

Try Out:

.menu-light ul > li:last-child a:hover {
  text-decoration: underline;
}

Answer №3

Please rewrite the following CSS code:

.aston-menu-light ul > li > a:last-child:hover {
  color:red !important;
}

to:

.aston-menu-light ul > li:last-child > a:hover {
  color:red;
}

The mistake you were making was applying the hover effect to all a elements within each li, which was unnecessary. By targeting only the last li element's a child, the desired result will be achieved.

Furthermore, there is no need for the !important declaration as this selector is more specific than simply targeting all a elements with black color. The text will turn red upon hovering regardless of the specificity.

Answer №4

Make it easier by following these steps.

.aston-menu-light ul li:last-child a:hover {
    color:red !important;
}

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

I am looking to implement a required alert for a radio button that mimics HTML5. How can

When using the input type text, adding the required attribute prevents the form from submitting and prompts the browser to focus on the required field with an alert instructing to fill it out. On the other hand, when applying the required attribute to t ...

javascriptjqueryhtmlformscss

What is the most effective way to toggle the visibility of these rows within a table?

Initially, my plan was to incorporate collapsible rows into my table. However, considering the spacing and margins, I realized that approach wouldn't work. After some thought, I concluded that all I really need is a way to hide and show information on ...

jqueryhtmlcsshtml-tableshow-hide

What is the process of incorporating a video into a react.js project through the use of the HTML

I'm experiencing an issue where my video player loads, but the video itself does not. Can anyone shed light on why this might be happening? class App extends Component { render() { return ( <div className="App& ...

javascripthtmlreactjs

Is there a way to incorporate a delete button for each li element that is included in my list?

I have successfully implemented a to-do list where clicking on an item strikes a line through it and there is a delete button that works. However, I am looking for assistance on how to create a delete button for each newly added li item. var button = do ...

javascripthtmlcss

AngularJS: Solving the issue of controllers not exchanging data by utilizing a service

I am working with the following controllers and service: angular.module('myApp', []); angular.module('myApp').factory('ShareService', function() { var information = {}; information.data = ""; information.setD ...

javascripthtmlangularjs

What causes an asynchronous function to exhibit different behavior when utilized in conjunction with addEventListener versus when manually invoked?

I was delving into the concepts of async and await keywords and decided to create a basic demonstration using an HTML file and a corresponding JS file. In my example, I defined two promises - promise1 and promise2. The handlePromises function uses async/ ...

javascripthtmlasynchronous

Loading background images in CSS before Nivo slider starts causing a problem

I've been struggling with preloading the background image of my wrapper before the nivo-slider slideshow loads. Despite it being just a fraction of a second delay, my client is quite particular about it -_- After attempting various jQuery and CSS tec ...

javascriptjquerycssbackgroundnivo-slider

JavaScript - Removing Content from an Element

I have a coding script that adds an image preview of uploaded images. The issue I am facing is that the previous image does not clear when the form is filled out again. The id of the div where thumbnail images are being displayed is "thumbnail". Can someo ...

javascriptphphtmldom

What is the process for extracting a numerical value from a text box and using it to update a database?

Trying to figure out how to add a numerical value entered into a text box to a value in a database table when the submit button is clicked. Let's say there's a table called customers in the database, with columns for name and balance. The goal i ...

phphtmlmysqlsqldatabase

What methods are most effective for integrating a Dart hello world into my current Node.js website?

After browsing through various tutorials and guides, I have yet to come across a clear-cut answer to my query. Currently, I am working on a website built on a node.js platform that is running locally on my computer. Objective: My next step involves writi ...

htmldart

How to centralize a div using jQuery when its width is not known

I have a fixed position div that I want to center in my browser window. Although it can be done with CSS, the issue is that I am dynamically changing the element's width multiple times (due to loading content via ajax), which means the width changes ...

jquerycsshtmlcenter

What makes Django forms the better choice over HTML forms?

Greetings! As a beginner in the world of Django, I am currently struggling to grasp the concept of Django forms. I find myself questioning the utility of Django forms when we already have the option to use HTML forms. Can someone please clarify this for ...

htmldjangoforms

CSS allows for the creation of fixed bars that remain at the top of the

I am looking to create a fixed bar that is off-center with a scrolling background. The code I have so far either places the bar on the surface but fixes it to the background, or it positions the bar beneath the image and fixes it to the window - neither ...

htmlcsscss-position

Creating two divs with equal heights in React using Material-UI at 50% each

I am currently utilizing a Material UI template within a react JS project. My goal is to create a div (or Grid in MUI) that spans 100% of its container's height, containing two nested divs (or Grids) that are each set at 50% height. If the internal c ...

cssreactjsmaterial-ui

Trouble arises when Bootstrap modal fails to display for IDs exceeding 1000

I'm facing an issue with a table that has hundreds of rows. I have assigned a td tag with a modal, but I've noticed that the modal doesn't show up when the id is greater than 1000. Here is how I've set up my data target in the td tag: & ...

htmlbootstrap-modalbootstrap-5

Using HTML and CSS to Position Text Within an Image

Is there a way to position an image next to specific points on the screen so that it remains in the same place regardless of screen size? Here is what I am trying to achieve: https://i.stack.imgur.com/A5cop.png Using HTML, this is my desired setup: < ...

htmlcss

What is the best way to enlarge a Material UI card?

Currently, I am utilizing Material UI version 4 on my website and integrating cards (for more details, click here). https://i.stack.imgur.com/dm2M2.png I am interested in enlarging the overall size of the card so that the image appears larger. As I am si ...

cssreactjsmaterial-ui

Enhancing your website with a touch of elegance: horizontal scrolling

I am looking to incorporate an inset shadow to visually indicate that there is additional content available for scrolling. For a clearer understanding, here is a sketch: https://i.sstatic.net/odMPd.jpg Currently, I am utilizing Bootstrap framework for th ...

cssmobilebootstrap-4

Using jQuery's .serialize is causing data to be sent via a GET request instead of a

I've encountered an issue where, when using ajax to submit a form, it works properly but the URL changes to something like this: Is this a common occurrence when using the following code? $j.post("sendMail.php", $j("#formMail").serialize()); Becaus ...

phphtmljquery

What are the different ways to position div containers using CSS?

So I have multiple div sections on my webpage, and they are arranged vertically in the following manner: However, I would like them to appear more like this: This is the structure of my HTML: <div id="main"> <div id="header"> ...

htmlcss