CSS selector priorities

by Ivan Gerasimenko

HTML

<div class='box boxR left-indent-20 left-indent-50'>A</div>
<div class='box boxG left-indent-50 left-indent-20'>B</div>
<div class='box boxB left-indent-50'>C</div>

CSS

.box {
    border: 1px solid #cccccc;
    width: 50px;
    height: 50px;
}

.left-indent-50 {
    margin-left: 50px;
}
/* this class has priority over .left-indent-50 cause it's deined after it*/
.left-indent-20 {
    margin-left: 20px;
}