Nesting CSS classes
CssCss SelectorsCss Problem Overview
Can I do something like the following?
.class1{some stuff}
.class2{class1;some more stuff}
Css Solutions
Solution 1 - Css
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;
}
}
Solution 2 - Css
Not possible with vanilla CSS. However you can use something like:
> 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
> 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;
}
}
Solution 3 - Css
Not with pure CSS. The closest equivalent is this:
.class1, .class2 {
some stuff
}
.class2 {
some more stuff
}
Solution 4 - Css
Not directly. But you can use extensions such as LESS to help you achieve the same.
Solution 5 - Css
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.
Solution 6 - Css
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).
Solution 7 - Css
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/