targeting class inside class in css

Question

I have a unordered list like the following. When I hover on the list Log In, the text was hiding so i did the following css to prevent it

li.nyan a:hover {
  color: #fff !important;
}

<ul>
  <li><a href="contact-us.html">Contact Us</a></li>
  <li class="nyan" style="background-color: #00bfff; "><a href="#">Log In</a>
    <ul>
      <li class="sss"><a href="admin">Admin</a></li>
      <li><a href="members">Member</a></li>
    </ul>
  </li>
</ul>

now when i hover on the child drop downs "admin" and "member", its hiding the log in text again, so i wanted to make the font color of text white when i hover on child dropdowns, i did something like this

li.sss a:hover {
  li.nyan {
    color: #fff !important;
  }
}

i know its not correct, am not good in css, can anyone help me with this please?

I don't understand, when I run your code, it does show that the Login, Admin and Member appears in white font. — Gosi
– Gosi, Commented Aug 28, 2019 at 8:29
@Gosi, because of some css conflict in the ready made template i am using, i need to know if there is any way to do it forcefuly adding inline styles :) — kingkhan kkhan
– kingkhan kkhan, Commented Aug 28, 2019 at 8:31
As above, the code you've provided works fine (other than the syntactically wrong last example). If it's not working for you then there's likely to be some other CSS interfering with yours. However we can't help with that without seeing it. — Rory McCrossan
– Rory McCrossan, Commented Aug 28, 2019 at 8:31
i need to know if there is any way to do it forcefuly adding inline styles Yes, there is. However it's literally the worst way to fix whatever your problem is. Use selector precedence to override instead. — Rory McCrossan
– Rory McCrossan, Commented Aug 28, 2019 at 8:32
@RoryMcCrossan can you please tell me how to do it coz i am new to css, — kingkhan kkhan
– kingkhan kkhan, Commented Aug 28, 2019 at 8:33

Sumit Patel · Accepted Answer · 2019-08-28 09:59:07Z

2

Try this you need to add one class to second ul link-color using that selector you need update the color. Check Snippet.

li.nyan:hover > a
{
  color: #fff !important;
}

ul >  li > .link-color > li a:hover
{
  color:#fff;
}

<ul>
  <li><a href="contact-us.html">Contact Us</a></li>
  <li class="nyan" style="background-color: #00bfff; "><a href="#">Log In</a>
    <ul class="link-color">
      <li class="sss"><a href="admin">Admin</a></li>
      <li><a href="members">Member</a></li>
    </ul>
  </li>
</ul>

answered Aug 28, 2019 at 9:59

Sumit Patel

4,6481 gold badge13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sumit Patel Over a year ago

Glad that helped.

Collectives™ on Stack Overflow

targeting class inside class in css

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related