Why can't I change the background colour with html selector with this media query?

Question

html, .large { font-size: 36px;
     color: #ffffff;
     background-color: #000000; 
} 
               
/* This does not work @media(max-width: 600px) { html { background-color: lightblue; } */               
@media(max-width: 600px) { 
  body { background-color: lightblue; }  
}  
             

blockquote, button, select, .bq, .required {
background-color: #0d0d0d; 
    color: #ffffff;      
    font-size: 0.8rem; 
}

ul { text-align: left }

ul li { display: inline; 
        font-size: 62.5%;
        margin:  50px;
        padding: 0px; 
}

<!DOCTYPE html>
<html class="large">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="myBlogDM.css"/>
   <style>

    </style>
</head>
<body>
<ul>
  <li><a href="https://english-writing.github.io">Home</a></li>
  <li><a href="samples.html">Sample CVs</a></li>
  <li><a href="blog/1.html">Blog</a></li>
  <li><a target="_blank" href="http://twitter.com/">Twitter</a></li>
  <li><a href="faq.html" >Frequently Asked Questions</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>                      
                           
  <h1>Jim Smith</h1>
 <hr>
  <h3>Writer</h3>
   <p>I write CVs and letters in English in html and pdf. 
I am an experienced writer ... 
  </p>
</body>
</html>

As the comment points out, when I use @media(max-width: 600px) html { background-color: lightblue; } } it does not change the background colour in response to the resizing of the browser window or the opening of the file on a mobile device. Yet, when I change the selector to body than it works as intended.

When I my stylesheet to html { font-size: 36px;
     color: #ffffff;
     background-color: #000000; 
}

then it works, why?

If the background colour of my document was set with html selector in the first place, why doesn't it change with @media(max-width: 600px) html { background-color: lightblue; } }?

@VictorPieper With `html, body` it works. Why doesn't it work with `html` only? — John Smith, Mar 06 '23 at 08:50
Have you tried `@media screen and (max-width: 600px)`? This looks like a typo to me, though I don't have any means to check right now, unfortunately. — David Thomas, Mar 06 '23 at 08:54
@JohnSmith I believe you have a mistake in your css example it now says /* This does not work */ on your working code (: — Victor Pieper, Mar 06 '23 at 09:00
PRobably your body doesn't match the html height. I tested your snippet in full page and resize it i'll see body background change but it doens't fit the html height — Sfili_81, Mar 06 '23 at 09:06
@JohnSmith I just tested this in a snippet, if you chance your body to html it does work. — Victor Pieper, Mar 06 '23 at 09:07
@JohnSmith Does this answer your question? https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries — Victor Pieper, Mar 06 '23 at 09:33
@VictorPieper Not sure if it does becasue I'm not using `:root` but `html` selector instead. — John Smith, Mar 06 '23 at 09:38

Oskar Grosser · Accepted Answer · 2023-03-06T11:00:36.077

According to the CSS specification on Background of Special Elements:

For documents whose root element is an HTML HTML element or an XHTML html element: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element.

That means the background properties of BODY only propagate to HTML if background-image and background-color of HTML are none and transparent respectively, which they are by default.

html {background-color: red}
body {background-color: blue} /*Won't propagate!*/

<html>
  <body>
    Some content
  </body>
</html>

/*No background properties on HTML set.*/
body {background-color: blue} /*Will propagate.*/

<html>
  <body>
    Some content
  </body>
</html>

This is why the document's background-color will remain black (or #000000) in your example, even after setting BODY's background-color to lightblue.

Another reason why your declaration doesn't work is specificity. You select the HTML element with both its type and its class, which results in the selectors' specificity being 0-0-1 and 0-1-0, respectively.

You select html in the media query, which has the specificity of 0-0-1 and is therefore less specific than the selector .large with a specificity of 0-1-0: Declarations of selector .large override declarations of selector html in the media query.

For default/initial declarations you may want to wrap your selectors in the :where() pseudo-class function to reduce their specificity to 0-0-0.

Why can't I change the background colour with html selector with this media query?

1 Answers1