ホームページ > 記事 > ウェブフロントエンド > CSS属性セレクターの詳しい説明

CSS属性セレクターの詳しい説明

小云云オリジナル: 2017-12-19 11:12:202003ブラウズ

指定された属性を持つ HTML 要素のスタイルを設定します。 class 属性や id 属性だけでなく、指定した属性を持つ HTML 要素のスタイルを設定できます。この記事では主に CSS 属性セレクターに関する知識を紹介しますので、興味のある方はぜひご覧ください。

注: IE7 および IE8 は、!DOCTYPE が指定されている場合にのみ属性セレクターをサポートします。 IE6 以前では、属性の選択はサポートされていません。

属性セレクター

次の例は、title 属性を持つすべての要素をスタイルします:

[title]
{
color:red;
}

属性と値セレクター

次の例は、title="W3School" を持つすべての要素をスタイルします。

[title=W3School]
{
border:5px solid blue;
}

属性および値セレクター - 複数の値

次の例では、指定された値を持つ title 属性を含むすべての要素のスタイルを設定します。スペースで区切られた属性値に適用されます:

[title~=hello] { color:red; }

次の例では、指定された値を含む lang 属性を持つすべての要素のスタイルを設定します。ハイフンで区切られた属性値に適用されます:

[lang|=en] { color:red; }

フォームのスタイル設定

属性セレクターは、クラスまたは ID なしでフォームをスタイル設定する場合に特に役立ちます:

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

CSS セレクターリファレンスマニュアル

[属性][attribute=value][attribute~=value]

セレクター	説明
は、指定された属性の要素を選択するために使用されます。
は、指定された属性と値を持つ要素を選択するために使用されます。
は、属性値に指定された語彙が含まれる要素を選択するために使用されます。
[attribute\|=value]	は、指定された値で始まる属性値を持つ要素を選択するために使用されます。これは単語全体である必要があります。
[attribute^=value]	属性値が指定された値で始まるすべての要素と一致します。
[attribute$=value]	属性値が指定された値で終わるすべての要素と一致します。
[attribute*=value]	属性値に指定された値が含まれるすべての要素と一致します。

CSS属性セレクターの詳しい説明

関連記事