loading...

Can the same (selector, name) pair be used for multiple functions in CSS?

calin92540842 profile image PDS OWNER CALIN (Calin Baenen) ・1 min read

In CSS, is this valid, or no?


/* remove the margin from html document */
html, body {
    margin:0;
}

/* make the body, AND ONLY the body's background green */
body {
    background:green;
    background-color:green;
}

Discussion

markdown guide
 

The CSS is valid but here are few things you should know. Kindly pardon me if it's too much or ignore it if you already know it.

Your first selector is valid i.e.

html, body {
    margin: 0;
}

For readability purposes, you can break the selectors into multiple lines.

html,
body {
    margin: 0;
}

Your second selector is also valid but the background property is shorthand for 8 other CSS properties namely:

  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size

When a CSS property is a shorthand for other properties and you supply just one of the properties the browser will use it for the intended property therefore, when you wrote the following:

body {
    background: green;
}

The browser will compute it as the value of the background-color property.

Based on your color values for both CSS properties i.e.background and background-color , the background color will be green always. Why?

Both selectors compute to the same thing (check the code snippet below).

body {
    background: green;             /* This is the same as background-color: green */
    background-color: green;       /* This is also green */
}

In reality, the browser is using the background-color property to color the pages. You can check the browser developer tools to confirm this.

Proof:

Firefox 79.0 browser with its developer tools opened

In the image above the browser clearly shows it is using the background-color property, and it also shows that it computed the background-color property for the background property but it cancels it to show that it's not using it.

The question you might ask can go as thus: Why use the background-color value over the background value?

The answer is simple: the cascade.

Your selectors compute to the same thing, therefore, the browser used the latter code i.e background-color. If you want to confirm this, change the color value of the background-color to red as shown in the code snippet below.

body {
    background: green;
    background-color: red; /* The browser will use this */
}

When this style is applied the page background will change to red due to the cascade.

Firefox 79.0 browser with its developer tools opened

If you'd like the background color to be green instead, rearrange the selectors.

body {
     background-color: red; 
     background: green;        /* The browser will now use this */
}

Proof:

Firefox 79.0 browser with its developer tools opened

In the image above, it shows that the browser is now using the background property and not the background-color property therefore, the page background color is green.

Once again, forgive me if this is too much, or if you already know this. I just couldn't help myself 🙃 .

I hope it helps you, or anyone reading this comment.

 

Thanks so much for your input!
I used both just to be safe, in-case of cascade, maybe it's just me who does this, I know I'm weird.
Have a wonderful day.
Cheers!

 

Yes, this is valid - though you only need one of the entries (either background or background-color in your second block. I prefer background-color: as that is more specific / clearer :-)

It can be good to do this when you want to separate the positioning (e.g. margin: padding:) etc. from the colouring in your CSS file[s]. You can also use comments to make intentions clear - /* say why! */

 

Ok, thanks so much for your feedback!