CSS - 比类选择器强的第一个子选择器

Question

I want to fire a CSS animation by adding a class to an list element that is styled by a first-child selector. But somehow the current style is not overwritten by the added class.

js fiddle

HTML

<ul class="start">
<li id="box" >move up onHover</li>
</ul>
<div id="button">hover</div>

CSS

.start li:first-child{

height:100px;
width:100px;
background: red;
opacity: 1;
transform: translate(0, 190px); 
transition: all 2.0s linear;

}

.change{
 opacity: 1;
 transform: translate(0, 0px);
 }

#button{
width: 80px;
height: 20px;
padding: 4px;
margin-left: 333px;
border:solid 1px black;
background: grey;
cursor: pointer;
color: white;
}

JS

    $('#button').hover(function() {
  $('#box').addClass('change');
})

Answer 1

It's not that it's stronger, but targeting the parent and then the LI is more specific, so you have to be just as specific when adding a new class

.start li.change

FIDDLE

Answer 2

.start li:first-child overrides styling of .change

Change

.change{}

to

.start li.change{}

Updated fiddle here.