CSS:Disable :before pseudo when UL without LI sub-elements-CodePudding

I have a css define as below:

ul:before{
    content:'';
    //other css definitions 
}

what I want is that, the :before pseudo only works when the UL has LI children, if the UL has no LI,make the :before invisible.

Thank you in advance.

CodePudding user response：

If the solution offered by @MrSwed (using :empty)doesn't work for you because of layout you might be able to use a pseudo element on the first li.

It depends on exactly what you want to achieve.

UPDATE: it is required that the UL have a background image if there is at least one LI. This snippet puts a background image onto the before pseudo element of the first LI, but it is sized and positioned in relation to the UL and therefore looks like a background to the whole UL.

ul {
  position: relative;
  color: white;
  /* just so it shows for this demo */
}

li:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  z-index: -1;
  background-image: url(https://picsum.photos/id/1015/200/300);
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  top: 0 left: 0
}

<h2>Empty ul</h2>
<ul></ul>
<h2>ul with a couple of lis</h2>
<ul>
  <li>first li</li>
  <li>second li</li>
</ul>

CodePudding user response：

if you control html and can out complete empty ul, you can use :empty

ul:not(:empty):before {
 content:'';
}

this will work for

<ul></ul>
<ul><!-- and with comments too --></ul>

but will not, if there any visible symbol inside ul

<ul>
</ul>
<ul> </ul>

Another way, control the output at the initial stage and add a class to the ul if it has no childs. And you can use it in css for turn off : before