Nesting CSS classes

Question

Can I do something like the following    class1 some stuff    class2 class1 some more stuff

User · Answer

No   You can use grouping selectors and or multiple classes on a single element  or you can use a template language and process it with software to write your CSS    See also my article on CSS inheritance

User · Answer

I do not believe this is possible  You could add class1 to all elements which also have class2  If this is not practical to do manually  you could do it automatically with JavaScript  fairly easy to do with jQuery

User · Answer

Not with pure CSS   The closest equivalent is this    class1   class2       some stuff     class2       some more stuff

User · Answer

Not directly  But you can use extensions such as LESS to help you achieve the same

User · Answer

Try this     Give the element an ID  and also a class Name  Then you can nest the  IDName className in your CSS   Here s a better explanation https   css-tricks com multiple-class-id-selectors

User · Answer

Not possible with vanilla CSS  However you can use something like    Sass      Sass makes CSS fun again  Sass is an   extension of CSS3  adding nested   rules  variables  mixins  selector   inheritance  and more  It   s translated   to well-formatted  standard CSS using   the command line tool or a   web-framework plugin    Or   Less      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    Example    header     color  red    a       font-weight  bold      text-decoration  none

User · Answer

Update 1  There is a CSS3 spec for CSS level 3 nesting  It s currently a draft  https   tabatkins github io specs css-nesting  Update 2  2019   We now have a CSSWG draft https   drafts csswg org css-nesting-1  If approved  the syntax would look like this  table colortable      amp  td       text-align center       amp  c   text-transform uppercase        amp  first-child   amp  first-child   td   border 1px solid black          amp  th       text-align center      background black      color white          foo     color  red     nest  amp   gt   bar       color  blue          foo     color  red     nest  parent  amp        color  blue         Status  The original 2015 spec proposal was not approved by the Working Group

[css] Nesting CSS classes

Examples related to css

Examples related to css-selectors