CODEWITHSUNDEEP
csscss-selectors
Dale Woods
Dale Woods

Reputation: 869

Selecting multiple child elements of a certain parent element

I was just wondering if CSS can support targeting multiple child elements with some easier syntax.

For example

I only want to change the css for h1, h2, h3 under a div with the id of parent

Normally you have to go...

#parent h1, #parent h2, #parent h3 { color:red; }

Is there an easier way to do this. Something like...

#parent {
  h1,h2,h3 { color:red; }

  .my_class { font-size:100%; } 

  #header { width:100%; }
}

In my second hypothetical example, the css will only be applied if the elements are children of #parent.

Thanks

Upvotes: 0

Views: 219

Answers (2)

Franky238
Franky238

Reputation: 519

In css you must use something like this:

#parent > h1, #parent > h2, #parent > h3
{
   color: red;
}

JSFIDLE: http://jsfiddle.net/fg6g7kt6/

Upvotes: 0

Erik Philips
Erik Philips

Reputation: 54636

CSS does not support what you want.

Both Sass and Less do (by chance, exactly as you have written it).

Sass:

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Less:

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Both products are very mature, share just about every feature the other does, but do have some minor differences between what they extend that make them not 100% compatible with each other (prior to generating CSS).

Upvotes: 3

Related Questions