Apply CSS except for child with specific ID

Consider the following mark up:

<ul>
 <li class="search-results">
   <p>Style me please</p>
   <span id="not-me-please">Do not style me</span>
 </li>

</ul>

And the CSS:

 ul li.search-results {color:green}

Obviously both the paragraph and the span will have green text but is there a way to use the :not selector so that the span doesn't get the styling?

You can use the :not pseudo-class and exclude the #not-me-please element as below, but I would not recommend this approach as it can be considered bad practice.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<ul>
 <li class="search-results">
   <p>Style me please</p>
   <span id="not-me-please">Do not style me</span>
 </li>
</ul>

<!-- language: lang-css -->

 ul li.search-results > *:not(#not-me-please) {color:green}

<!-- end snippet -->

Recommendation

Either add a specific class to the elements intended to be green (i.e., <p class="search-results_label">) or target the p tags directly (i.e., ul li.search-results > p).

> Note that I would not advise targeting the global ul tag directly either.