html - Style link in a li -

i have list in html

<div id="sidemenu">     <li class="current_page_parent">         <a href="#">category 1</a>         <ul class="children">             <li><a href="#">sub</a></li>             <li><a href="#">sub</a></li>             <li><a href="#">sub</a></li>             <li><a href="#">sub</a></li>         </ul>     </li>     <li></li>     <li></li> </div> 

i want put background-color first link : 'category 1' without affecting others links

here's css

.current_page_parent li:not(.children) {     display: block;     padding: 5px 15px;     background-color: #d6205c; } 

you can use first-of-type combined > combinator selector

the :first-of-type css pseudo-class represents first sibling of type in list of children of parent element.

the > combinator separates 2 selectors , matches elements matched second selector direct children of elements matched first.

li.current_page_parent:first-of-type > a{     display: block;     padding: 5px 15px;     background-color: #d6205c; } 

li.current_page_parent:first-of-type > {    display: block;    padding: 5px 15px;    background-color: #d6205c;  }

<div id="sidemenu">    <li class="current_page_parent">      <a href="#">category 1</a>      <ul class="children">        <li><a href="#">sub</a>        </li>        <li><a href="#">sub</a>        </li>        <li><a href="#">sub</a>        </li>        <li><a href="#">sub</a>        </li>      </ul>    </li>    <li></li>    <li></li>  </div>