Get those li that have sub children ul - html

Question

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.

Answer 1

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.

Answer 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