Search code examples
htmlcsscss-selectorspseudo-class

Apply style when all childs are the same


I have a rare demand:

I need the style "list-style:none" only when I have <ol> childs and no more tags.

Example, in this case I will apply the style:

<div>
  <ol><li>1</li></ol>
  <ol><li>2</li></ol>
</div>

In each other, I will disable the style:

 <div>
  <p>
  <ol><li>1</li></ol>
</div>

What is the best way? Thanks


Solution

  • This is not possible with pure CSS. You'll have to either modify the HTML to add classes manually, or use a script to determine if there are only ol elements inside and no other types of children, then apply the class or the style.