Help on Fundamental CSS comprehension test :solved

MDN Learn
#1

Hi , I am having problems here’s a link to the HTML and CSS;
https://jsfiddle.net/nickm49/h2m6re9a/3/

I have added a header and footer rule " .card header footer" to set the height and padding but it doesn’t work, but when I add the same rules to the “.card header” and “.card footer” sections separately it does work, also when adding seperate “.card header” and “.card footer” rules it also works but combining into one rule doesn’t. Is it to do with specificity?

I worked it out, need to use a comma between selectors “header, footer” , just a space indicates descendant of previous selector.

link to the test; https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension

Assessment wanted for Fundamental CSS comprehension test
#2

Hi @nickmaskell and welcome to the community :wave:

I’m glad you could solve it yourself and thanks for sharing the solution. This will help others.

Be aware that .card header, footer will match any footer on the page. In this exercise we only have one so it doesn’t matter. To specifically match the card footer you need to repeat the class .card header, .card footer.

I also had a look at the rest of your code and the only thing I would change is using unitless line-heights. For an explanation why this is recommended see: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values

Everything else is perfect :ok_hand:

Have a nice weekend,
Michael