Question

I saw this selector in Twitter Bootstrap:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

Does anyone know what this technique is called and what it does?

Answer 1

It’s an attribute wildcard selector. In the sample you’ve given, it looks for any child element under .show-grid that has a class that CONTAINS span.

So would select the <strong> element in this example:

<div class="show-grid">
    <strong class="span6">Blah blah</strong>
</div>

You can also do searches for ‘begins with…’

div[class^="something"] { }

which would work on something like this:-

<div class="something-else-class"></div>

and ‘ends with…’

div[class$="something"] { }

which would work on

<div class="you-are-something"></div>

Good references

• CSS3 Attribute Selectors: Substring Matching
• The 30 CSS Selectors you Must Memorize
• W3C CSS3 Selectors