Nesting CSS classes

by

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 editors draft
https://drafts.csswg.org/css-nesting-1/

Update 3 (2022): We now have a W3C First Public Working Draft https://www.w3.org/TR/css-nesting-1/

If approved, the syntax would look like this:

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Is there a “previous sibling” selector?
  3. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  4. CSS selector for first element with class
  5. What does the “+” (plus sign) CSS selector mean?
  6. Is there a CSS selector by class prefix?
  7. CSS selector for “foo that contains bar”? [duplicate]
  8. How do I select an element based on the state of another element in the page with CSS?
  9. Does the order of classes listed on an item affect the CSS?
  10. Handling a colon in an element ID in a CSS selector [duplicate]
  11. How can I select an nth child without knowing the parent element?
  12. Can I use variables for selectors?
  13. How to select label for=”XYZ” in CSS?
  14. In which direction do selector engines read, exactly?
  15. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  16. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  17. How can I apply styles to multiple classes at once?
  18. Is it possible to select the last n items with nth-child?
  19. CSS property value from class name
  20. Can I colour backgrounds of selected items in HTML select options with CSS only?
  21. LESS CSS: abusing the & Operator when nesting?
  22. CSS3 combining selectors with OR instead of AND
  23. Why doesn’t this CSS :not() declaration filter down?
  24. How to show the first N elements of a block and hide the others in css?
  25. What is the difference between :before and ::before?
  26. Can I target all tags with a single selector?
  27. What CSS selector can be used to select the first div within another div
  28. CSS Selector for not a child of element type?
  29. :last-child pseudo-class mixed with attribute selector not working
  30. CSS selector based on width?

Leave a Comment