0

I need to apply custom styles to a list item with a nested <div> container with a specific class.

This div is not the first child element of <li>. I only know that it is nested somewhere inside <li>.

I tried this option (below), and it works with <div>, but for some reason, it doesn't work with <li>.

ul{
   display: flex;
   flex-wrap: wrap;
   gap: 20px
}


li > .item-wide{
  
  color: green;
}
<ul>
  <li> Some text </li>
  <li> Some text </li>
  <li> Some text </li>
  <li> <div class="other"><div class="item-wide">Some text</div></div> </li>
  <li> Some text </li>
</ul>
Rumata
  • 1,027
  • 3
  • 16
  • 47
  • You have a typo in the second selector. There shouldn't be that paren. – Darryl Noakes Aug 09 '23 at 21:35
  • @DarrylNoakes Could you please explain, what typo? – Rumata Aug 09 '23 at 21:36
  • 2
    You should have `li > .item-wide`, not `li > .item-wide)`. – Darryl Noakes Aug 09 '23 at 21:37
  • @DarrylNoakes oh... thank you! :) If you'll add it as an answer I'll accept it. – Rumata Aug 09 '23 at 21:38
  • @DarrylNoakes Sorry, no, it still doesn't work – Rumata Aug 09 '23 at 21:41
  • @DarrylNoakes As I wrote in the text - I need to check if there is a div with this class among children of li. In the case of nesting it doesn't work. I updated the code, please check. – Rumata Aug 09 '23 at 21:42
  • 1
    Most likely it's because in your updated example, you've now nested _item-wide_ inside another div. The _>_ selector is for *direct* descendants. Remove the _other_ div and it should work. If you want it to apply to _item_wide_ no matter how deep it is, don't include the '>' in your selector. – Lewis Aug 09 '23 at 21:42
  • @DarrylNoakes That's the problem - I can't remove it from my actual code. That's why I need to check if there is a div with this class somewhere among children of li, not as a first child. – Rumata Aug 09 '23 at 21:43
  • [`>` - Child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) – Darryl Noakes Aug 09 '23 at 21:43
  • @DarrylNoakes I need to check if there is a div with such a name inside, but not necessarily as a first child. Is there a way to do it using other selectors? – Rumata Aug 09 '23 at 21:44
  • So are you trying to select the child, or the `li` containing it? Can you add new rulesets to the CSS? – Darryl Noakes Aug 09 '23 at 21:46
  • @DarrylNoakes Can you please reopen the question? I updated the code to fit my request, which I described in the description from the beginning "This div is not the first child element of
  • , so I need to check if it is nested inside, among other things."
    • – Rumata Aug 09 '23 at 21:46
  • 1
    [:has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) – imhvost Aug 09 '23 at 21:46
  • @DarrylNoakes I need to select
  • that has
    with a specific class. But this
    is not the first child. It can be nested several levels deep. I only know that it is inside this
  • – Rumata Aug 09 '23 at 21:47