Question

I am reading a Responsive website book, where I see the styles definition like

.main-navigation 
  {
    li {position: relative;}
    .children 
          {
            left: -999em;
            position:absolute;
          }
   }

I have also tried in my css file, but seems not to be working.
Now my question 🙂 Can we define css style in this way?

Answer 1

This is not proper CSS. But you can use this with a CSS preprocessor like less.

Quote from the website:

Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

This works with SASS/SCSS, too.