Why is the styling different between these two CSS structures?

HTML & CSS
1

I have a page where a div has an ID style and the child p has a class style that is not defined, but if I move the styling from the div.ID->p.class, the rendering of the page and bubbling of the CSS is different. I did not change the HTML.

So, I move all the declarations in div#expoStudy to p.expo, but the results are not the same. I don’t understand why. Before the change, .expo is empty (not defined actually), and after the change #expoStudy is empty deleted).

image
image1230×298 24.4 KB

to

image
image1236×295 24.8 KB

2

Well, I see where the padding-bottom was overridden:

image
image195×309 7.77 KB

But that doesn’t make sense because the .expo is more specific than the #currentContent that is 4 levels up/out. So, still, why?

3

#currentContent p is more specific than p.expo, in CSS scoring.

CSS uses a Column Preference Score.
There are three columns - ID’s, Classes (also attributes/pseudoclasses), and Elements.
Count the number of each type of item in the selector. That’s its score.
Compare two selectors by comparing their scores in Lexicographical form.

#currentContent p contains 1 ID and 1 Element. It would be scored 1-0-1.
p.expo contains 1 Class and 1 Element. It would be scored 0-1-1.
Compare the scores. Start in the first column.
1 > 0. So #currentContent p wins.
If you did #currentContent p.expo, it would have a score of 1-1-1, and would win, because the first column ties, and the second column would favor the latter.

4

totally :exploding_head:

WOWZA! Thank you so much!