子类的CSS属性选择器

Question

just a curiosity.

If i have CSS rules like this:

.section{width:100%;min-height:200px;}
.section.container-1{background:blue;}
.section.container-2{background:red;}
.section.container-3{background:orange;}

is it possible to use the

css attribute selector

so that i can write something like:

.section.[class*='container-'] h1{color:white}

Just to clarify:

• I will have a structure where .section is the common class to all the DIVs (width and height)
• All the containers inside .section will have different style (background color)
• All the H1 inside .container-n will have the same style. (color, font etc)

here's an example HTML code to make it more clear:

<div class="section container-1"><h1></h1><!--Will display blue background and white text --></div>
<div class="section container-2"><h1></h1><!--Will display red background and white text --></div>
<div class="section container-3"><h1></h1> <!--Will display orange background and white text --></div>

I know that i can do it in different ways, and i already know how to do it, i just wonder if something like above could be possible or not.

thanks

Answer 1

Yes, it will work. Just remove the period prefixing the attribute selector.

.section.[class*='container-'] h1
/*      ^ remove that.. it's an attribute selector, not a class. */

Example Here