I am trying to set the third link in a list with a different color, but everything does not work well. All colors of the 3 links change to the #5bacc3 color.
Here is my code:
HTML code:
<ul class="nav-section__link">
<li>ABOUT</li>
<li>MENU</li>
<li>SHOP NOW</li>
</ul>
CSS code:
.nav-section__link a:link:last-child,
.nav-section__link a:visited:last-child {
color: #5bacc3;
}
the li is the child of the ul not the anchor tag
.nav-section__link li:last-child a:link,
.nav-section__link li:last-child a:visited {
color: #5bacc3;
}
<ul class="nav-section__link">
<li>ABOUT</li>
<li>MENU</li>
<li>SHOP NOW</li>
</ul>
Well #Thành Nhân, you are targeting <a> tag as last child. But there anchor is the only child and so they are last too.
So target with <li> tags as children of ul
Keep follow hierarchy in css that will help you to get results better and without any error.
.nav-section__link li:last-child a:link,
.nav-section__link li:last-child a:visited {
color: red;
}
<ul class="nav-section__link">
<li>ABOUT</li>
<li>MENU</li>
<li>SHOP NOW</li>
</ul>
Related
I seem to not be able to make the JOIN link in my navigation bar the colour gold (#ba9a45) using css nth child or by using the alternative class "join" and adding a value of gold (#ba9a45).
This is my code so far:
<ul>
<li>HOME</li>
<li>CASINO</li>
<li>HOTEL</li>
<li>ENTERTAINMENT</li>
<li>EVENTS</li>
<li>MEMBERS</li>
<li>JOIN</li>
</ul>
Using nth-child
.navbar li a:nth-last-child{
color: #ba9a45;
}
Using class="join"
.navbar li a{
.join{
color: #ba9a45;
}
}
How can I fix this issue using both nth-child and alternatively the class "join"?
You can achieve this by one of the following. Also make sure the relevant parent div or <ul> has the class of .navbar
.navbar li:last-child a {
color: #ba9a45;
}
OR:
.navbar li a.join {
color: #ba9a45;
}
and if the parent div has the class .navbar the correct CSS would be:
.navbar ul li:last-child a {
color: #ba9a45;
}
Add & before join class
.navbar li a{
&.join{
color: #ba9a45;
}
}
Demo in css
.navbar li a.join{
color: #ba9a45;
}
<ul class="navbar">
<li>HOME</li>
<li>CASINO</li>
<li>HOTEL</li>
<li>ENTERTAINMENT</li>
<li>EVENTS</li>
<li>MEMBERS</li>
<li>JOIN</li>
</ul>
or
Add :last-child in <li>
.navbar li:last-child a{
color: #ba9a45;
}
Demo in css
.navbar li:last-child a{
color: #ba9a45;
}
<ul class="navbar">
<li>HOME</li>
<li>CASINO</li>
<li>HOTEL</li>
<li>ENTERTAINMENT</li>
<li>EVENTS</li>
<li>MEMBERS</li>
<li>JOIN</li>
</ul>
The CSS rules aren't being applied to the html document.
nav > a {
color: #ffffff;
}
<nav>
<ul>
<li>About</li>
<li>Store</li>
<li>Login</li>
</ul>
</nav>
The expectation is that the color would be white, it isn't it nothing changes.
The > means "direct child" and in your case it's not a direct child. You can use nav a which means "every a in nav"
nav a {
color: #ffffff;
}
<nav>
<ul>
<li>About</li>
<li>Store</li>
<li>Login</li>
</ul>
</nav>
Try it
nav > ul > li > a {
color: #ffffff;
}
Your problem is with the >, do this in your css instead:
nav a {
color: #ffffff;
}
I've recently been looking back into web design and learning new things with it. I am now using the last-of-type selector, and I'm trying to do so for a navigation bar, but it doesn't seem to work the way I want it to.
HTML:
<nav class="main-nav">
<div class="inset-inner">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</nav>
Now, I want to select the last of type li for this, so here is my CSS:
.main-nav ul li:last-of-type {
color: green;
}
I do have a color set for the a element for this, so I have tried adding !important, but it doesn't help at all. The only way I can get it to work is if I make it like this:
HTML:
<nav class="main-nav">
<div class="inset-inner">
<ul>
<!--<li>Home</li>
<li>Contact</li>
<li>About Us</li>-->
<li>Home
Contact
About Us
</li>
</ul>
</div>
</nav>
CSS:
/*
.main-nav ul li:last-of-type {
color: green !important;
}
*/
.main-nav ul li a:last-of-type {
color: green;
}
Now, how could I fix this for when I have a li element for each a element, and what is causing this anyways?
Use last-of-type on the <li>, then add an a at the end:
.main-nav ul li:last-of-type a{
color: green;
}
jsFiddle example
So, if I understand your question correctly, you'd like for the last link to be green, using the last-of-type selector:
http://jsfiddle.net/YWfx2/
All you need to do is put the selector on the li and add the a tag after it!
HTML :
<nav class="main-nav">
<div class="inset-inner">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</nav>
CSS :
.main-nav ul li:last-of-type a{
color: green;
}
I guess I am not getting css child combinators.
I am trying to target just the first level on the li's with the following:
ul > li { color: green; }
<ul>
<li>Home</li>
<li>
Products
<ul>
<li>Product 1 </li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Contact</li>
<li>News</li>
</ul>
http://jsfiddle.net/5vB3h/
NOTE: I also tried removing the spaces between >, with no luck.
You're using them fine, but all (properly marked-up) <li>s are children of <ul>s. You can specify the parent (in your jsFiddle, body):
body > ul > li
Or reverse the styles with the more specific case:
li ul > li {
color: black;
}
In the case of color, you need to use the second option anyways, because color is inherited. Here's the updated jsFiddle.
Your rule targets the child list items of any list. What you can do is create a second rule to recolor the other sub list items. For example:
ul > li {
color: green;
}
li li {
color:black
}
jsFiddle example
ul will match all the <ul> elements. Since every <li> is a child of one of the <ul>s…
You need to be more specific about which <ul> you mean. Perhaps add a class to it.
ul > li will select all the li elements in your document because they are all the children of ul elements.
If you apply a class to the parent like <ul class="top">, then you can use ul.top > li.
Add a class
li {color: blue;}
/* ^ added because maybe initial property is color: inherit;
If not, someone correct me */
ul.a > li { color: red; }
After this, add class to ul like <ul class="a" ...
http://jsfiddle.net/5vB3h/7/
EDIT (worked it out):
Okay so I ballsed up. Below is wrong.
ul:first-child > li { color: green; }
I found that when applying:
div>ul>li{color:green}
all lis went green... turns out that the li magically inherit the color of the li (odd behaviour as I assume the content had color:#000)
anyway... You need to explicitly set the color: to soemthing other than green to see the style working.
fiddle here
//html
<div>
<ul>
<li>Home</li>
<li>
Products
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Contact</li>
<li>News</li>
</ul>
</div>
//css
li {color:black} //you have to have this (or something like * {color:black} OR body/html {color:black} as li seem to automatically inherit parent li color property
div>ul>li{ color: green; } //have to have parent.
I have a class of div's with the class footer-list, and I need to change all the text of the li to be white.
The html looks like:
<div id="footer-middle-left-right">
<div class="footer-list">
<ul>
<li>FAFSA Guide</li>
<li>Scholarship Finder</li>
<li>State Education</li>
<li>Ready UP</li>
</ul>
</div>
<div class="footer-list">
<ul>
<li>Terms of Service</li>
<li>Privacy Settings</li>
<li>FAQ</li>
</ul>
</div>
<div class="footer-list">
<ul>
<li>How it Works</li>
<li>Submit a School</li>
<li>Submit a Professor</li>
<li>Report a Misspelling</li>
</ul>
</div>
</div>
Obviously adding another class element to all the li is overkill, and not maintainable really. Im pretty new to css and can't figure out the correct way to select all the li in the classes.
I tried something like:
.footer-list.li{
color: white;
}
to no avail. Any help about this, suggested reading, or any other css advice would be greatly appreciated! Im more of a back-end guy so this is the first I've really had to worry about css part of this, so it's gotten me a bit lost!
Actually you are adding a . before li which makes it a class so try this
.footer-list li { /* This selects li inside the class .footer-list */
color: #fff; /* Even white is fine */
}
Or better be specific and use
.footer-list ul li { /* Will apply to li which are inside ul which is inside .footer-list only */
color: #fff;
}
Your selector:
.footer-list.li{
color: white;
}
Says "select elements with BOTH classes footer-list and li."
This is incorrect for what you want, you have to add a space between them and remove the dot:
.footer-list li{
color: white;
}
This will select any <li> within any element with the class footer-list :)
Just remove the dot before li
.footer-list li{
color: white;
}