if HTML is like:
-section1
--h1
--h2
--h3
--section2
--h1
--h2
--h3
-section3
--h1
--h2
--h3
--section4
--h1
--h2
--h3
what should we do if we want to give section1, section2, section3 same style and section4 different style ? in short code.
I wrote the code like
.section1 .h1,
.section1 .h2,
.section1 .h3,
.section2 .h1,
.section2 .h2,
.section2 .h3,
.section3 .h1,
.section3 .h2,
.section3 .h3,{
color: blue;
}
but its too long and looking bad, is there any short way to write this.
2
Answers
The shortest vanilla CSS code is by selecting all elements that start with
section
by using the[class^="..."]
attribute selector. Then overwrite the styles for section 4 specifically:Alternatively, you can also use a Preprocessor like SASS:
You can do like below as well: