Is there any css class grouping css classes in css 3?

Question

I have a css conflict between share point 2013 core css and my css. So I want to put all my class under div #s4-workspace But I search about a way to grouping all classes under this div like in media query in css

=> for example

 #s4-workspace {

   input, button{css style}
   a,a:hover{css style}
   table{css style}
  .div1{css style}
  .div2{css style}
  .div3{css style}

}

is it possible in css3.

Thanks in Advance

Possible duplicate of Is there a better way to do CSS classes "within CSS classes"? — Paulie_D
– Paulie_D, Commented Nov 30, 2015 at 10:37

FelipeAls · Accepted Answer · 2015-11-30 14:42:08Z

0

Do you want to avoid repeating the id like:

#s4-workspace   input,
#s4-workspace   button,
#s4-workspace   a,
#s4-workspace   a:hover,
#s4-workspace   table,
#s4-workspace  .div1,
#s4-workspace  .div2,
#s4-workspace  .div3 {
  /* */
}

This is called nesting and no it isn't possible in CSS Level 3.

Any preprocessor has this feature like LESS and Sass, though.

EDIT: it appears you want the resulting CSS:

#s4-workspace   input,
#s4-workspace   button {
  /* CSS styles 1 */
}
#s4-workspace   a,
#s4-workspace   a:hover {
  /* CSS styles 2 */
}
#s4-workspace   table {
  /* CSS styles 3 */
}
#s4-workspace  .div1 {
  /* CSS styles 4 */
}
#s4-workspace  .div2 {
  /* CSS styles 5 */
}
#s4-workspace  .div3 {
  /* CSS styles 6 */
}

Same answer: not possible in CSS Level 3 though it can be compiled from a .less or .scss file (which would be very similar to your example of code). Those 2 preprocessors allow nesting as one of their basic features.

edited Nov 30, 2015 at 14:42

answered Nov 30, 2015 at 9:12

FelipeAls

22.3k9 gold badges57 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DAHISH Over a year ago

thanks, I know this way to apply one style for all tags. But what I need to add more tags and style for each one under one dive as a parent. like media query => @media {...classes here...} check it again : #s4-workspace { a {color:#000} button {border:1px} inbut {background: #fff} }

FelipeAls Over a year ago

Oh I did 2 things in my example: adding id at the beginning of each selector and merging styles that I thought were commons. I'll edit my answer

DAHISH Over a year ago

Thanks again for your effort, Now I'm sure it is not possible in CSS3 and I must use .less or .scss. - Thanks again

Collectives™ on Stack Overflow

Is there any css class grouping css classes in css 3?

=> for example

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

=> for example

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related