<div class="container">
<h2>Background is <b style="color: blue;">blue</b>, because of selector specificity.</h2>
<div class="second first"></div>
<h2>Background is <b style="color:red">red</b>, because of selector order.</h2>
<div class="third fourth"></div>
<h2>Background is <b style="color: green">green</b>, because of selector importance.</h2>
<div class="fifth sixth"></div>
</div>
/* Specificity example */
body .first {
background: blue;
}
.second {
background: yellow;
}
/* Rules order example */
.third {
background: cyan;
}
.fourth {
background: red;
}
/* Rules importance example */
.fifth {
background: green!important;
}
.sixth {
background: yellow;
}
/* Settings that are not important for this example. */
div {
width: 5rem;
height: 5rem;
display: flex;
flex-direction: row;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
height: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.