2

How to get those li that have children ul. I want to set CSS to those li. I can't set class because li are dynamically print. When I set CSS as below so it set all parent li to plus. 

.ul{
 width:200px;
 position:relative;
}
.ul li{
   position:relative;
 }
.ul > li:before{
 content : '+';
 position: absolute;
 top: 0;
 right: 7px;
}
<ul class="ul">
<li>List 1</li>
<li>List 2</li>
<li>List 3
    <ul>
       <li>Sub List 1</li>
       <li>Sub List 2</li>
       <li>Sub List 3</li>
    </ul>
</li>
<li>List item 4</li>
</ul>
This is style for that.
kukkuz
  • 37,972
  • 6
  • 47
  • 83
Bhavik Hirani
  • 1,764
  • 4
  • 24
  • 38

2 Answers2

2

You can't do that because in CSS, you don't have a parent selector.

For instance you can't do something like:

ul < li { color: #ddd; }

or even something like:

ul:has(li) { color: #ddd; }

This is because there are a lot of performance issues like re-rendering the page if you have such a parent selector. That's why W3C guys have not added the parent selector tool.

Look here for reading more into it:

Is there a CSS parent selector?

Parent selectors in CSS

Community
  • 1
  • 1
kukkuz
  • 37,972
  • 6
  • 47
  • 83
2

You're very close actually. The trick is to style simply each ul that is inside a .ul. Then move the + to where you want it to appear (i.e. after the first line of the parent li).

.ul {
  width: 200px;
  position: relative;
}
.ul li {
  position: relative;
}
.ul ul::before {
  content: '+';
  position: absolute;
  top: 0;
  right: 7px;
}
<ul class="ul">
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3
    <ul>
      <li>Sub List 1</li>
      <li>Sub List 2</li>
      <li>Sub List 3</li>
    </ul>
  </li>
  <li>List item 4</li>
</ul>
This is style for that.
Mr Lister
  • 42,557
  • 14
  • 95
  • 136