TECH I.S.

CSS 属性セレクター


特定の属性を持つHTML要素のスタイル設定

特定の属性または属性値を持つHTML要素のスタイルを設定できます。


CSS [attribute]セレクター

[attribute]セレクターは、指定された属性を持つ要素を選択するために使用されます。

次の例では、target 属性を持つすべての<a>要素を選択します。

a[target] {   background-color: yellow; }

自分で試してみる »


CSS [attribute="value"] セレクター

[attribute="value"]セレクターは、指定された属性と値を持つ要素を選択するために使用されます。

次の例では、target="_blank"属性を持つすべての<a>要素を選択します。

a[target="_blank"] {   background-color: yellow; }

自分で試してみる »


CSS [attribute~="value"] セレクター

[attribute~="value"]セレクターは、指定された単語を含む属性値を持つ要素を選択するために使用されます。

次の例では、スペースで区切られた単語のリストを含むtitle属性を持つすべての要素を選択します。そのうちの1つは「flower」です。

[title~="flower"] {   border: 5px solid yellow; }

自分で試してみる »

上記の例は、title="flower"、title="summer flower"、title="flower new"の要素に一致しますが、title="my-flower"やtitle="flowers"には一致しません。


CSS [attribute|="value"] セレクター

[attribute|="value"]セレクターは、指定された属性を持つ要素を選択するために使用されます。その値は、指定された値と正確に一致するか、指定された値の後にハイフン(-)が続きます。

注:値は、class="top"のように単独で、またはclass="top-text"のようにハイフン( - )が続く単語全体である必要があります。

[class|="top"] {   background: yellow; }

自分で試してみる »


CSS [attribute^="value"] セレクター

[attribute^="value"]セレクターは、値が指定された値で始まる、指定された属性を持つ要素を選択するために使用されます。

次の例では、class属性値が「top」で始まるすべての要素を選択します。

注:値は単語全体である必要はありません!

[class^="top"] {   background: yellow; }

自分で試してみる »


CSS [attribute$="value"]セレクター

[attribute$="value"]セレクターは、属性値が指定された値で終わる要素を選択するために使用されます。

次の例では、class 属性値が「test」で終わるすべての要素を選択します。

注:値は単語全体である必要はありません!

[class$="test"] {   background: yellow; }

自分で試してみる »


CSS [attribute*="value"] セレクター

[attribute*="value"]セレクターは、属性値に指定された値が含まれる要素を選択するために使用されます。

次の例では、「te」を含むクラス属性値を持つすべての要素を選択します。

注:値は単語全体である必要はありません!

[class*="te"] {   background: yellow; }

自分で試してみる »


フォームのスタイリング

属性セレクターは、クラスやIDを使用せずにフォームをスタイリングするのに役立ちます。

input[type="text"]{   width: 150px; display: block; margin-bottom: 10px; background-color: yellow; } input[type="button"]{   width: 120px;   margin-left: 35px;   display: block; }

自分で試してみる »

ヒント:CSS を使用してフォームのスタイルを設定する方法の例については、CSS フォームのチュートリアルをご覧ください。


すべての CSS 属性セレクター

セレクタ

例の説明

[attribute] [target] target属性を持つすべての要素を選択します。
[attribute=value] [target="_blank"] target="_blank" を持つすべての要素を選択します。
[attribute~=value] [title~="flower"] 「flower」という単語を含む title 属性を持つすべての要素を選択します。
[attribute|=value] [lang|="en"] 「en」で始まる lang 属性値を持つすべての要素を選択します。
[attribute^=value] a[href^="https"] href 属性値が「https」で始まるすべての <a> 要素を選択します。
[attribute$=value] a[href$=".pdf"] href 属性値が「.pdf」で終わるすべての <a> 要素を選択します。
[attribute*=value] a[href*="techis.jp/guide"] href 属性値に部分文字列 "techis.jp/guide" が含まれるすべての <a> 要素を選択します。


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細