change font color to all li tags
if u write li{color:white}
then u just change the list point icon not text because there are anchors in them so u should writeli a{color:white}
to make all li text white
setting font color of a inside a li tag
Use this style definition in your css-file:
div.c1 li.c2 a {
color: red;
}
PS: Having your <li>
tag inside your <div>
-tag without an <ul>
-tag is not recommended.
Change text color of selected li item
You can target the <li>
or the <a>
in this case i target the second li and then the a so the font changes to red.
If you only target the li, the font wont change to red.
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
Example targeting the
<a>
.menu.left li:nth-child(2) a{ background-color: yellow; color: red;}
<ul class="menu left"> <li> <a href="#">1231233123</a> </li> <li> <a href="#">Sale</a> </li></ul>
Changing font color of a contained within li, but on hover over li
The way that works on IE6 is to still target the link, but make the link fill the whole of the space inside the <li>
:
li a { display: block; }
li a:hover { background-color: green; }
Target specific li tag to change background color and text color
Change your selector to this to only addess the last li
in the second submenu:
ul.site-nav > li:nth-child(2) ul.site-nav-dropdown li:last-child a
background: red;
color: #fff;
}
ul.site-nav > li:nth-child(2) ul.site-nav-dropdown li:last-child a {
background: red;
color: #fff;
}
<ul class="site-nav">
<li class=" ">
<a href="/" class="current">
<span>LIST ONE</span>
</a>
</li>
<li class="dropdown">
<a class="" href="/list-nav-two"><span>LIST TWO</span></a>
<ul class="site-nav-dropdown">
<li><a href="#" class=""><span>SERIES 1</span></a></li>
<li><a href="#" class=""><span>SERIES 2</span></a></li>
<li><a href="#" class=""><span>SERIES 3</span></a></li>
<li>
<a href="#" class=""> <span>SERIES 4</span></a>
</li>
<li><a href="/current-equipment-list" class=""><span>THIS IS THE LI TO CHANGE</span></a></li>
</ul>
</li>
<li class="dropdown"><a class="menu__moblie" href="/list-nav-three"><span>LIST THREE</a>
<ul class="site-nav-dropdown">
<li><a href="#" class=""><span>SERIES 1</span></a></li>
<li><a href="#" class=""><span>SERIES 2</span></a></li>
<li><a href="#" class=""><span>SERIES 3</span></a></li>
<li>
<a href="#" class=""> <span>SERIES 4</span></a>
</li>
</ul>
</li>
</ul>
Related Topics
Zurb Foundation - Many Duplicate CSS Entries
CSS Background Gradient with Offset
Polymer Chip-To-Card Pattern with Core-Animated-Pages and a Long List
Currentcolor Inheritance for Svg Url
Margin-Top Under a Floated Div CSS
More Than 12 Cols Per Row in Bootstrap
Why Backdrop Filter in Firefox Don't Work
Making a Row of Divs All Be The Same Height Using CSS
Setting The Scrollbar Color in Safari for Lion (Os X 10.7)
How to Make The Animation Smooth
Ie7 Cause of "Text - Empty Text Node"
Why Does Svg Get Blurred When Scaled Under Webkit Browsers
Offering Smaller Versions of Videos with Media Query or When Mobiles Are Detected
How to Change Focus Glow of Textarea in Bootstrap 3