Recently a back end developer asked me with there was a way to use a wild card in CSS that would allow him to generate ID’s on the fly. The solution I came up with was to use an attribute selector.

When using attribute selectors in CSS the name before the “|” is the attribute targeted. In this case “id” is used but we could have just as easily used “rel”, “input”, “value” etc.

The text after the “|” is what the attribute must start with to be read. The example uses “section”. Each “id” in the html that starts with “section” will be styled. Some id’s use more specific code in certain div’s to give them unique colors showing how the cascading works in the CSS file.

Here is the solution:

View the Demo

CSS Code
[id|="section"]{
border: 10px solid #999;
margin:10px 0;
background:black;
width: 200px;
height: 200px;
}
[id|="section-item"]{
background:green;
}
#section-1{
background:red;
}
#section-2{
background:blue;
}
#section-3{
background:yellow;
}