:not experiment

by sqiudward

HTML

<div id="ter">


  <ul  class="parent">
      <li class="child">child1</li>
      <li class="child">child2</li>
      <li class="child">child3</li>
      <li class="child">child4</li>
      <li class="child special">specialChild</li>
      <li class="child specialed">specialChild</li>
  </ul>


</div>

CSS

ul { 
    list-style:none; 
    margin:0; 
    padding: 0;
}
li { 
    margin: 5px 0;
    cursor:pointer;
}
li.child {
    background-color: red;
    color:#FFF;
}
#ter li:hover:not(.special) {
    background-color: yellow;
}