次のCSSセレクターがあるとします
[attribute~=value] { }
[attribute*=value] { }
上記のセレクターは両方ともまったく同じことを行うのでしょうか? それとも違いがあるのでしょうか?
何らかの違いがあると思いますが、それは何でしょうか? 私が気づいた唯一の違いは、各ペアの最初のものが CSS 2 の仕様にあり、2 番目のものが CSS 3 の仕様にあることです。
他に何かありますか?
ベストアンサー1
アスタリスク属性セレクタ*=任意の部分文字列の出現と一致します。これは、呼び出しを含む文字列と考えることができます。
| 入力 | マッチ*=bar |
|---|---|
foo |
いいえ |
foobar |
はい |
foo bar |
はい |
foo barbaz |
はい |
foo bar baz |
はい |
チルダ属性セレクタ~=単語全体のみに一致します。
| 入力 | マッチ~=bar |
|---|---|
foo |
いいえ |
foobar |
いいえ |
foo bar |
はい |
foo barbaz |
いいえ |
foo bar baz |
はい |
div {
padding: 10px;
border: 2px solid white;
}
[attribute*=bar] {
background: lightgray;
}
[attribute~=bar] {
border-color: red;
}<div>no attribute</div>
<div attribute="foo">attribute="foo"</div>
<div attribute="foobar">attribute="foobar"</div>
<div attribute="foo bar">attribute="foo bar"</div>
<div attribute="foo barbaz">attribute="foo barbaz"</div>
<div attribute="foo bar baz">attribute="foo bar baz"</div>