[解決済み】このCSSセレクタは何ですか？[クラス*="span"] です。

質問

Twitter Bootstrapでこのセレクタを見かけました。

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

このテクニックの名称と効果をご存知の方はいらっしゃいますか？

どのように解決するのですか？

これは、属性のワイルドカードセレクターです。与えられたサンプルでは、以下のすべての子要素を探します。 .show-grid を含むクラスを持つもの span .

ということは <strong> 要素を使用します。

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

また、「...で始まる」の検索も可能です。

div[class^="something"] { }

というようなものであればうまくいくでしょう。

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

と「ends with...」で終わります。

div[class$="something"] { }

で動作します。

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

良い参考文献

• CSS3 属性セレクタ。サブストリングマッチング
• 覚えておきたいCSSセレクタ30選
• W3C CSS3セレクタ