Setting Font Color of <A> Inside a Li Tag

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 write
li 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



Leave a reply



Submit