CSS - Is it valid to have selectors within selectors

Question

I was reading documentation about Angular Material and I ran into this:

.column-login {

    padding: 16px;

  div {
    background: #f5f5f5;
    border: 1px solid #000;
    padding: 50px;
    margin: 16px 0;
  }
}

And it seemed to me a little bit weird. I'm using Visual Studio Code and it shows a bunch of errors there just as I was expecting.

But the code works perfectly. Now, is there any equivalent to that piece of css code?

Because I tried:

.column-login {

    padding: 16px;
}

.column-login > div {
    background: #f5f5f5;
    border: 1px solid #000;
    padding: 50px;
    margin: 16px 0;
  }

And:

.column-login {

    padding: 16px;
}

.column-login div {
    background: #f5f5f5;
    border: 1px solid #000;
    padding: 50px;
    margin: 16px 0;
  }

But it broke. It only works with the first piece of code I just showed you. But I don't know, it seems to me so weird. Can anybody explain me why is it correct?

This is not CSS. It's probably SASS or some other CSS preprocessor. — Álvaro González, Nov 07 '17 at 19:57

DaveStSomeWhere · Accepted Answer · 2017-11-07T20:04:11.767

1

Nested rules is not valid CSS, but it is a feature of a CSS preprocessor program like Sass - it generates valid CSS when compiled.

Your sample generates the following from Sass:

.column-login {
  padding: 16px; 
  }
.column-login div {
  background: #f5f5f5;
  border: 1px solid #000;
  padding: 50px;
  margin: 16px 0; 
  }

edited Nov 07 '17 at 20:04

answered Nov 07 '17 at 19:58

DaveStSomeWhere

2,475
2
22
19

Oh, that makes sense now. I was so confused about that. Haha Thank you so much for clearing me that up. :) – Rafael Barón Nov 07 '17 at 20:03

CSS - Is it valid to have selectors within selectors

1 Answers1