CODEWITHSUNDEEP
css
Gaspode
Gaspode

Reputation: 148

Div-specific element styling

If I want to style the elements within a div, instead of saying : 

#divid input { ... }
#divid h1 { ... }

Is there a way of saying something like : 

#divid {

  input: { ... }
  h1: { ... }

}

With my programming head on, the second way feels 'better' so I just wondered if it's possible to group element definitions in such a way?

Upvotes: 1

Views: 40

Answers (3)

Edwin Dijas Chiwona
Edwin Dijas Chiwona

Reputation: 620

CSS does not support that. On the other hand you can use Sass, you will need to compile to css. Visit the site in the link for more information.

Upvotes: 0

user241244
user241244

Reputation:

Not directly in CSS. For this, you'd need a preprocessor, which will come along with other handy things -- they virtually all support this kind of organization, including:

Comparisons: https://raygun.com/blog/css-preprocessors-examples/, https://code.tutsplus.com/tutorials/sass-vs-less-vs-stylus-preprocessor-shootout--net-24320, etc. (Google is your friend now that you know the terms.)

Upvotes: 1

Bob Hensley
Bob Hensley

Reputation: 459

What you're describing is the use of a CSS preprocessor like SASS/SCSS. It has been designed to clean up CSS code by allowing for syntax much like this. In SCSS, it'd actually be:

#divid {
  input { }
  h1 { }
}

And that would be parsed out to:

#divid input { }
#divid h1 {}

Thus allowing you to write cleaner, more organized code, and letting the preprocessor handle the optimization and reworking to valid CSS.

Upvotes: 3

Related Questions