[attr|=value]

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

意味属性値が特定の値か、その値の直後にハイフンが続く要素

[attr|=value]とは？

指定した属性の値が特定の語か、その語の接頭辞で始まる要素を選択するために使用します。文字のサブコード指定などによく使われます。

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

特定の言語属性を持つ要素のスタイリング例

<style>
    [lang|=en] {
        color: red;
    }
</style>

<p lang='en-us'>これは英語のテキストです。</p>

lang属性が'en'または'en-'で始まる要素のテキスト色を赤に設定します。この例では、lang='en-us'と設定されたp要素が該当します。

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

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

A. |=は「または直後にハイフンが続く」という意味で、指定した属性値が特定の値か、その値の直後にハイフンが続く要素を選択します。

Q. どんな時に使うのが適切ですか？

A. 言語コードや国コードなど、階層的な値を持つ属性を選択する際に適しています。例えば、[lang|=en]は'en'、'en-US'、'en-GB'などを選択します。

Q. 完全一致との違いは？

A. [attr='value']との違いは、[attr|='value']がハイフンで続く値も選択する点です。例えば、[lang='en']は'en-US'を選択しませんが、[lang|='en']は選択します。

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

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

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