CSS :last-child AND :hover on an a link in a ul
0
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!
html css css-selectors hover href
asked Nov 22 '18 at 14:30
Shaun TaylorShaun Taylor
379113
add a comment |
0
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!
html css css-selectors hover href
asked Nov 22 '18 at 14:30
Shaun TaylorShaun Taylor
379113
1
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)
– Pete
Nov 22 '18 at 14:39
add a comment |
0
0
0
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!
html css css-selectors hover href
asked Nov 22 '18 at 14:30
Shaun TaylorShaun Taylor
379113
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!
html css css-selectors hover href
html css css-selectors hover href
asked Nov 22 '18 at 14:30
Shaun TaylorShaun Taylor
379113
asked Nov 22 '18 at 14:30
Shaun TaylorShaun Taylor
379113
asked Nov 22 '18 at 14:30
Shaun TaylorShaun Taylor
379113
asked Nov 22 '18 at 14:30
Shaun TaylorShaun Taylor
379113
asked Nov 22 '18 at 14:30
Shaun TaylorShaun Taylor
379113
379113
1
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)
– Pete
Nov 22 '18 at 14:39
add a comment |
1
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)
– Pete
Nov 22 '18 at 14:39
1
1
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)
– Pete
Nov 22 '18 at 14:39
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)
– Pete
Nov 22 '18 at 14:39
add a comment |
3 Answers
3
active
oldest
votes
4
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>answered Nov 22 '18 at 14:36
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
1
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.
– Jeremy
Nov 22 '18 at 14:40
Thank you AboAlimk! Perfect - I understand what I did wrong now! Also, thank you Jeremy for the explanation :)
– Shaun Taylor
Nov 22 '18 at 14:53
add a comment |
0
Use This:
.aston-menu-light ul > li:last-child a:hover {
color:red;
}
answered Nov 22 '18 at 14:39
SuprabhaSuprabha
1556
add a comment |
0
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.
answered Nov 22 '18 at 14:48
Bárbara EsteBárbara Este
137
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53433146%2fcss-last-child-and-hover-on-an-a-link-in-a-ul%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
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>answered Nov 22 '18 at 14:36
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
1
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.
– Jeremy
Nov 22 '18 at 14:40
Thank you AboAlimk! Perfect - I understand what I did wrong now! Also, thank you Jeremy for the explanation :)
– Shaun Taylor
Nov 22 '18 at 14:53
add a comment |
4
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>answered Nov 22 '18 at 14:36
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
1
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.
– Jeremy
Nov 22 '18 at 14:40
Thank you AboAlimk! Perfect - I understand what I did wrong now! Also, thank you Jeremy for the explanation :)
– Shaun Taylor
Nov 22 '18 at 14:53
add a comment |
4
4
4
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>answered Nov 22 '18 at 14:36
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
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>/* 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>/* 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>answered Nov 22 '18 at 14:36
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
answered Nov 22 '18 at 14:36
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
answered Nov 22 '18 at 14:36
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
answered Nov 22 '18 at 14:36
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
31715
1
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.
– Jeremy
Nov 22 '18 at 14:40
Thank you AboAlimk! Perfect - I understand what I did wrong now! Also, thank you Jeremy for the explanation :)
– Shaun Taylor
Nov 22 '18 at 14:53
add a comment |
1
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.
– Jeremy
Nov 22 '18 at 14:40
Thank you AboAlimk! Perfect - I understand what I did wrong now! Also, thank you Jeremy for the explanation :)
– Shaun Taylor
Nov 22 '18 at 14:53
1
1
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.– Jeremy
Nov 22 '18 at 14:40
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.– Jeremy
Nov 22 '18 at 14:40
Thank you AboAlimk! Perfect - I understand what I did wrong now! Also, thank you Jeremy for the explanation :)
– Shaun Taylor
Nov 22 '18 at 14:53
Thank you AboAlimk! Perfect - I understand what I did wrong now! Also, thank you Jeremy for the explanation :)
– Shaun Taylor
Nov 22 '18 at 14:53
add a comment |
0
Use This:
.aston-menu-light ul > li:last-child a:hover {
color:red;
}
answered Nov 22 '18 at 14:39
SuprabhaSuprabha
1556
add a comment |
0
Use This:
.aston-menu-light ul > li:last-child a:hover {
color:red;
}
answered Nov 22 '18 at 14:39
SuprabhaSuprabha
1556
add a comment |
0
0
0
Use This:
.aston-menu-light ul > li:last-child a:hover {
color:red;
}
answered Nov 22 '18 at 14:39
SuprabhaSuprabha
1556
Use This:
.aston-menu-light ul > li:last-child a:hover {
color:red;
}
answered Nov 22 '18 at 14:39
SuprabhaSuprabha
1556
answered Nov 22 '18 at 14:39
SuprabhaSuprabha
1556
answered Nov 22 '18 at 14:39
SuprabhaSuprabha
1556
answered Nov 22 '18 at 14:39
SuprabhaSuprabha
1556
1556
add a comment |
add a comment |
0
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.
answered Nov 22 '18 at 14:48
Bárbara EsteBárbara Este
137
add a comment |
0
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.
answered Nov 22 '18 at 14:48
Bárbara EsteBárbara Este
137
add a comment |
0
0
0
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.
answered Nov 22 '18 at 14:48
Bárbara EsteBárbara Este
137
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.
answered Nov 22 '18 at 14:48
Bárbara EsteBárbara Este
137
edited Nov 22 '18 at 14:53
answered Nov 22 '18 at 14:48
Bárbara EsteBárbara Este
137
answered Nov 22 '18 at 14:48
Bárbara EsteBárbara Este
137
answered Nov 22 '18 at 14:48
Bárbara EsteBárbara Este
137
137
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53433146%2fcss-last-child-and-hover-on-an-a-link-in-a-ul%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
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)
– Pete
Nov 22 '18 at 14:39