CSS ignoring my combined style

HTML & CSS
1

Why does this code…


<div class="commentSurveyComplete">
	<p>Comment Survey:</p>
	<p>Thanks for your feedback.</p>
</div>

…ignore this style…


div.commentSurveyComplete p{
	margin: 0;
	padding: 0;
}

…and instead use this style…


#boxComments p {
    display: block;
    padding: 5px 5px 0 0;
}

:mad:

Sincerely,

Debbie

2 

#boxComments p {
    display: block;
    padding: 5px 5px 0 0;
}

Probably comes after


div.commentSurveyComplete p{
	margin: 0;
	padding: 0;
}

Reverse their order.

3

Nope, that’s not it.

Debbie

4

It’s simple specificity. An ID is worth 100 points basically. A class is worth 10, and an HTML element is worth 1. So let’s do some math

#boxcomments p{} is worth 101. Because it’s an ID and HTML element. 100+1 = 101.

The div.commentSurveyComplete p{} is worth 12. HTML element + class + HTML element. So as you can see, it’s not even a close race.

Off Topic:

Good to see you again DoubleDee