how to find first non-empty by css selector?

Question

How to find the first non-empty child element only using css selector? Is there anybody who can help me? Thanks a lot!!!

Such as below:

<ul><li></li>...<li><span>o haha</span></li>...<li></li></ul>

How can I get the first non-empty li element by css selector

Answer 1

This needs two selectors to make it work:

li:not(:empty) {
   /* First non-empty <li> styles */
}

li,
li:not(:empty) ~ li {
   /* All other <li> styles */
}

Example:

http://jsfiddle.net/tr958/2/