CSS :last-child AND :hover on an a link in a ul

css last element
scss last-child
nth-child:hover
css last-of class
css last-child of-type
css last-child not working
css nth-last-child
last-child::after css

I'm styling the last child of a navigation menu which I seem to be able to do fine with the following 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;
} 

The trouble comes when I try and target the <a> on the last child on hover. I'm using this:

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

But it seems to style all of the <a> tags and not just the last child. I've tried variations such as: ul > li a but I can't seem to get it o work correctly.

I have a Codepen here: https://codepen.io/shaun-taylor/pen/LXdGGN

The main goal being for this one is just to turn the last link on the top level only red when you hover on it I guess - Thnk you for reading!

you should change

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

to

.aston-menu-light>ul>li:last-child > a: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>

How to combine :first-child and :hover?, How to combine :first-child and :hover? html css. I have an unordered list I'm using Share a link to this question Chaining :first-child and :hover as you do here should work just fine. If you're using IE6, however, only the last pseudo-​class in the chain will be recognized. li:first-child:hover should work. The :last-child selector allows you to target the last element directly inside its containing element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Use This:

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

:last-child, The :last-child CSS pseudo-class represents the last element among a ul li { color: blue; } ul li:last-child { border: 1px solid red; color: red; }  Definition and Usage. The :last-child selector matches every element that is the last child of its parent.. Tip: p:last-child is equal to p:nth-last-child(1).

You shold rewrite

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

to

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

What you were doing wrong is that in all the li elements the a element is always the last child! Therefore in all of them, it will turn red when you hover. What you needed was the last li element, therefore using li:last-childin the CSS.

Also, there is no need to use the !important, since this CSS selector is more specific than just

a {
  color: black;
}

It will be red anyway.

CSS :nth-last-child() Selector, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  The :last-child CSS pseudo-class represents the last element among a group of sibling elements. /* Selects any <p> that is the last element among its siblings */ p:last-child { color: lime; } Note : As originally defined, the selected element had to have a parent.

CSS/Selectors/pseudo-classes/:last-child, CSS/Selectors/pseudo-classes/:last-child. < CSS‎ | Selectors · CSS Selectors The following selector represents a list item li that is the last child of an ordered  The :nth-last-child selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.

Hover on "Everything But", We'll apply the current CSS properties to all the children of the parent when the individual div is hovered, we bump the opacity back up, giving the final effect we are looking for. And yes, old you-know-who browsers don't do :hover on anything but anchor links. This can be done with CSS, using pseduo-selectors. ul… Styling links as buttons. The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.

How nth-child Works, There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it: ul li:nth-child(3n+3) { color: #ccc; } What the above. Definition and Usage. The :hover selector is used to select elements when you mouse over them.. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

Comments
  • I'm guessing that all your a's are last children as they are probably the only child of the li, but as your question is off topic, I voted to close: Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. (External links may rot and this is meant to be a repository of information for future users)
  • Yes, and for some extra information to Shaun, all the <a> elements are the "last-childs" of their <li> elements so all of them became red.
  • Thank you AboAlimk! Perfect - I understand what I did wrong now! Also, thank you Jeremy for the explanation :)