To change the font color to red, you can target either the <li>
element or the <a>
element. When targeting the second <li>
and then the <a>
, the font will change to red. However, if you only target the <li>
, the font will not change to red.
If you need further assistance or a better solution, feel free to ask for help.
Here is an example of 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>
And here is an example of solely targeting the <li>
:
.menu.left li:nth-child(2){
background-color: yellow;
color: red;
}
<ul class="menu left">
<li>
<a href="#">1231233123</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
OP's Comment:
"Gerardo, thank you for your solution. It worked well, but I encountered issues with the mobile version of the link. Could you please take a look? Here is the codepen: codepen.io/anon/pen/xYJKRW "
In response to your comment, when dealing with the mobile version of the link, make sure to target the <a>
element instead of the <li>
. Try this code:
[data-mobile-dropdown-rel="sale"] a {
color: red;
}