Selector Priorities

HTML

<div id="heading1">
    <h2 class="title1">
       Hi I'm a TITLE1!
    </h2>
</div>

Class(.title1) have more Priorities
than the id(#heading1)
and elements (<h2>).

---

<div id="heading2">
    <h3 class="title2">
       Hi I'm a TITLE2!
    </h3>
</div>

Elements (<h3>)
have more Priorities than
the id(#heading2).

class(.title2) commented.

---

<div id="heading3">
    <h4 class="title3">
       Hi I'm a TITLE3!
    </h4>
</div>

The id(#heading3) has the less priority
between the class(.title3) and elements (<h4>).

Class (.title3) and element (<h4>) commented.

CSS

.title1{
    color: tomato;
}
#heading1 {
    color: blue;
}
h2{
    color: purple;
}


---

/*
.title2{
    color: tomato;
}
*/
h3{
    color: purple;
}
#heading2 {
    color: blue;
}


---

#heading3 {
    color: blue;
}
/*
.title3{
    color: tomato;
}
h3{
    color: purple;
}
*/