-2

I want to target the parent li, not the child li with css selecter only.

<ul>
        <li>{Target the li of this ul only}</li>
        <li>{Target the li of this ul only}</li>
        <li>
            <ul>
                <li>{it would be different styling}</li>
                <li>{it would be different styling}</li>
                <li>{it would be different styling}</li>
            </ul>
        </li>
    </ul>
Dilip Mishra
  • 1
  • 2
  • what selector did you try that failed? – Temani Afif Mar 13 '19 at 10:12
  • I don't want to add any class to the elements and don't repeat the code to overwrite the parent css style. Only want to add css style for only parent li. if we target with ul > li it will also reflect to children class – Dilip Mishra Mar 14 '19 at 05:55

1 Answers1

2

Give both ul different classes and apply style to their child li

.a>li {
  color: green
}

.b>li {
  color: red
}
<ul class='a'>
  <li>{Target the li of this ul only}</li>
  <li>{Target the li of this ul only}</li>
  <li>
    <ul class='b'>
      <li>{it would be different styling}</li>
      <li>{it would be different styling}</li>
      <li>{it would be different styling}</li>
    </ul>
  </li>
</ul>
ellipsis
  • 12,049
  • 2
  • 17
  • 33
  • Want to achieve without adding any class or attribute. Want to add CSS for the parent element which does not reflect on the child element. – Dilip Mishra Mar 14 '19 at 05:59