CSSの属性セレクターとは？基本の使い方と書き方を解説
属性セレクターでスタイルを適用する
CSSでは、特定の属性を持つHTML要素に対してスタイルを適用することもできます。例えば、以下のスタイルルールは、type属性の値が「text」であるすべてのinput要素にマッチします。
input[type = "text"]{
color: #000000;
}
このように属性セレクターを活用すると、class名やidを個別に付与しなくても、要素が持つ属性の値に応じてピンポイントにスタイリングできるのが大きなメリットです。フォーム入力欄だけ色を変えたい場合などに特に便利です。
属性セレクターの主な書き方
属性セレクターにはいくつかのパターンがあり、それぞれ選択される要素の条件が異なります。代表的なルールは以下の通りです。
- p[lang] —
lang属性を持つすべてのp（段落）要素を選択します。属性の値は問いません。 - p[lang="fr"] —
lang属性の値が「fr」と完全に一致するすべてのp要素を選択します。 - p[lang~="fr"] —
lang属性の値の中に「fr」という単語が含まれているすべてのp要素を選択します。複数の値がスペース区切りで指定されている場合に有効です。 - p[lang|="en"] —
lang属性の値が「en」と完全一致するか、ハイフン区切りで「en-」から始まる値（例：en-US、en-GB）を持つすべてのp要素を選択します。
これらのセレクターを使い分けることで、「言語設定に応じたフォント指定」「特定タイプの入力欄のみ装飾」など、より柔軟で保守しやすいCSS設計が可能になります。用途に応じて適切な記述方法を選びましょう。
-
CSS属性セレクターでフォームを美しくスタイリングする方法
CSS属性セレクターとは CSSの属性セレクターを使用すると、特定の属性やその値を持つHTML要素だけを対象にスタイルを適用できます。フォームの入力欄やボタンのように、同じタグでも役割が異なる要素を個別に装飾したい場合に特に便利です。 属性セレクターには、主に以下のような記述ルールがあります。 p[lang] ― lang属性を持つすべてのp要素を選択します。 p[lang=fr] ― lang属性の値が「fr」に完全一致するすべてのp要素を選択します。 p[lang~=fr] ― lang属性の値に「fr」という単語が含まれるすべてのp要素を選択します(空白区切りの値リストに部分一致)。
-
CSSの高度なセレクター徹底解説｜隣接兄弟・属性・nth-of-typeセレクターの使い方
CSSには、要素をより細かく指定できる「高度なセレクター」が多数用意されています。代表的なものとして、隣接兄弟セレクター、一般兄弟セレクター、直接の子セレクター（子結合子）、属性セレクター、nth-of-typeセレクターなどがあります。 これらのセレクターを使いこなせるようになると、HTMLに余計なクラスやIDを追加することなく、柔軟かつ効率的にスタイルを適用できるようになります。ここでは、それぞれのセレクターの特徴と使い方を解説します。 CSSの高度なセレクターの種類 1. 隣接兄弟セレクター（+） 「A + B」の形式で記述し、要素Aの直後に隣接している要素Bのみにスタイルを適用しま