It is required that the background defined by the class active apply only to the first line of the list item <li> containing another list, and in other cases it is processed by default (as defined in the standard):

 .active { background-color: yellow; color: blue; border: 1px solid black; } 
 <ul> <li class="active">sub li1 <ul> <li>child1</li> <li>child2</li> <li class="active">child3</li> </ul> </li> <li>sub li2 <ul> <li>child1</li> <li>child2</li> <li class="active">child3</li> </ul> </li> </ul>
Desired result enter image description here

  • 3
    jsfiddle.net/soledar10/c86uLrsv - soledar10
  • @ soledar10, crutch of course :) There is an option to use li .active:before {content: '•'; background: yellow;} li .active:before {content: '•'; background: yellow;} - Mr. Black

3 answers 3

For such things, you can use universal HTML elements, such as <div> and <span> :

 .active { background-color: yellow; color: blue; border: 1px solid black; } 
 <ul> <li> <div class="active">sub li1</div> <ul> <li>child1</li> <li>child2</li> <li class="active">child3</li> </ul> </li> <li>sub li2 <ul> <li>child1</li> <li>child2</li> <li class="active">child3</li> </ul> </li> </ul>

https://jsfiddle.net/su8cu5dL/

  • There is a snippet and a link to jsfiddle. That's good) - Nick Volynkin ♦

if you understand correctly, you can do so:

 ul > li:nth-child(3) { background-color: yellow; color: blue; border: 1px solid black; } .active { background-color: yellow; color: blue; border: 1px solid black; } <ul> <li><div class="active">sub li1</div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li> sub li2 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </li> </ul>

    try to ul:nth-last-child add