css - CSS-属性値全体に一致する

Question

HTML

<div data-whatever='something cols-16 else'>
</div>

これは機能します：

動作します-CSS

[data-whatever*='cols-1'] {
    background: red;
}

divが見つかり、赤になります。

動作しません-CSS

[data-whatever='cols-16'] {
    background: red;
}

そこには他のものもあるので、divは見つかりません。

問題

cols-16動作するCSSの問題は、CSSがと、cols-1およびで始まるその他のCSSの両方に一致することcols-1です。

質問

属性値、完全一致を見つけることは可能ですか？

Answer 1

これを試して：

[data-whatever~='cols-1'] {
    background: red;
}

私があなたの質問を誤解していなければ、それは私のために働きました

編集：〜=をランダムに覚えて、試し、貼り付けました。

しかし、私は少しググっただけです（私は好奇心を持っていて、これを見つけました、それは非常に興味深いです）

Answer 2

クラスcols-16をターゲットにするため（他のクラスで表示される場合でも）

cols-1クラスをターゲットにしないでください。これを使用します。

[data-whatever~='cols-16'] {
    background: green;
}

あなたはこれがこのフィドルで働いているのを見ることができます。

詳細については、この投稿を参照してください（Goto＃16。-X [foo〜= "bar"]

ティルダ（〜）記号を使用すると、値の間隔で区切られたリストを持つ属性をターゲットにすることができます。

Answer 3

スタイル（下記）をオーバーライドするスタイルに依存せずにcols-1一致する だけであることを確認するには、次のようにします。cols-16cols-16cols-1

[data-whatever='cols-1'],
[data-whatever^='cols-1 '],
[data-whatever*='cols-1 '],
[data-whatever$='cols-1'] {
    background: red;
}

これdata-whatever="cols-1"は、、、またはdata-whatever="... cols-1"に一致します。data-whatever="cols-1 ..."data-whatever="... cols-1 ..."

JSFiddleの例。

aleationの答えのおかげで：data-whatever~="cols-1"たった1つのセレクターで上記と同じことを達成します。

-

いずれにせよ、提示された順序によっては、cols-16スタイリングがスタイリングを上書きする可能性があります。cols-1

[data-whatever*='cols-1'] {
    background: red;
}

[data-whatever*='cols-16'] {
    background: blue;
}

/*cols-1は赤になります。cols-16は青になります*/

JSFiddleの例。