[attr~=value]

アトリビュートチルダイコールバリュー（セレクタ）

意味属性値が特定の単語を含む要素

[attr~=value]とは？

[attr~=value]は、指定した属性(attr)が特定の単語(value)を含む要素を選択するために使用します。

[attr~=value]の具体的な使い方

特定のクラスを含む要素のスタイリング例

<style>
    p[class~='important'] {
        color: red;
    }
</style>

<p class='note important'>
    これは重要な段落です。
</p>

class属性に'important'という単語を含む全てのp（段落）要素のテキスト色を赤に設定します。この例では、'note important'というクラス属性を持つp要素が赤く表示されます。

[attr~=value]に関するよくある質問

Q. ~=の意味は何ですか？

A. ~=は「含む」という意味で、指定した属性値が特定の単語を含む要素を選択します。単語は空白で区切られた完全な単語である必要があります。

Q. 複数の値に対して使えますか？

A. はい、[class~='important'][class~='urgent']のように複数の条件を組み合わせることができます。これは'important'と'urgent'の両方のクラスを持つ要素を選択します。

Q. 部分一致でも選択されますか？

A. いいえ、完全な単語のみが対象です。例えば、class='important-note'は[class~='important']では選択されません。完全な単語'important'ではないためです。

[attr~=value]が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの[attr~=value]や:active、[attr=value]、:last-of-type、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。