Can I do something like the following?
.class1{some stuff}
.class2{class1;some more stuff}
Add a comment
|
8 Answers
There is now a CSS Nesting Module in the CSS specification. The module is currently a Working Draft and CSS nesting is supported in all major browsers.
The syntax looks 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;
}
}
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;
}
}
2 Comments
kralco626
alright. Thanks. I'm using JQuery anyways, so i'll use that. I was just hoping to use css because then if I dynamically add another pice of html with class2, for example, that class would be attached to the new html, where as with Jquery I have to add it manually after adding the html
moopet
What does jQuery have to do with it? Are you suggesting you roll your own css pre-processor in jQuery?
Not with pure CSS. The closest equivalent is this:
.class1, .class2 {
some stuff
}
.class2 {
some more stuff
}
1 Comment
Stokely
Thanks for this. It’s bizarre how so many love taking a simple solution like nested CSS and turning it into a nightmare with preprocessing. If we had this simple feature in plain CSS it would be another solid reason to stop all this extra preprocessing kids love today.
Not directly. But you can use extensions such as LESS to help you achieve the same.
1 Comment
kralco626
alright. Thanks. I'm using JQuery anyways, so i'll use that. I was just hoping to use css because then if I dynamically add another pice of html with class2, for example, that class would be attached to the new html, where as with Jquery I have to add it manually after adding the html.
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.
Comments
If you cannot wait until native CSS nesting goes official, you can use Container Queries to do it. As of now, it is supported (partially) by Chrome & Edge 105+, as well as Safari 16+.
It will looks like this:
.class1 {
container-type: inline-size;
container-name: my-container;
// other style rules
}
@container my-container (min-width: 0px) {
.class2 {
// some style rules
}
}
More details can be found at here.
Comments
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).
Comments
This is now possible with native CSS nesting.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting
Just be sure to have semicolon ; before the nested selector, or else the whole block is invalid
.foo {
color: red;
> .bar {
color: blue;
}
&:before {
color: green;
}
}
1 Comment
Philippe Cloutier
While a semicolon is required in your example, it is not always. Also, the CSS nesting module is only a working draft.
