「CSSの属性セレクタを使えば、classを追加しなくても特定の要素にスタイルを適用できます。本記事では、属性セレクタの基本から使い方、便利な活用例まで初心者にもわかりやすく解説します。」
「CSSでデザインするとき、つい class を追加してスタイルを当てていませんか？ 実は、HTMLにすでに書かれている“属性”を使うことで、classなしでも柔軟にデザインできる方法があります。それが『属性セレクタ』です。本記事では、属性セレクタの基本から具体的な使い方、便利な活用シーンまで、初心者にもわかりやすく解説します。」
属性とは（おさらい）
HTMLタグに設定される属性の役割
属性とは「要素に追加情報を与えるための情報」です。
例えば、<input type="text"> の type="text" が属性です。
＊属性を理解する記事はこちら→「 属性 」って何？ タグだけでは物足りない！属性で伝わるhtml
属性セレクタの基本的な書き方
[属性] を使ったシンプルな指定方法
→ type 属性を持つ input 要素すべてにスタイルが適用されます。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
[属性=”値”] で特定の要素を指定する
→ type="text" の input だけに適用できます。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
classと属性セレクタの違い
classを使ったデザインの方法
→ 明示的に class を追加する方法。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
classを使わずにスタイルを当てられるケース
→ class を追加しなくても、属性を使えばデザイン可能。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
属性セレクタとは
簡単に言うと…
＊＊「タグの中にすでに書いてある’’属性’’を使って、CSSデザインする方法」＊＊です。
＊ “type-text”ってもう書いてあるから、それ使っちゃえばよくない？っていう発想！（笑）
クラスも属性
classやidも実は「属性」の一種
・もちろん属性なので、属性セレクタとして使うことはできますが…
class や id も属性のひとつです。
ただし、class と id はよく使われるため、CSSには専用の書き方（.class名 や #id名）が用意されています。
それがこちらの記事→【CSS入門】セレクタ(selector)とは？初心者にもわかりやすい3つの基本（タグ・クラス・ID）を解説
属性セレクタはこんな時に便利！
＊クラスを追加したくない時
＊フォームのタイプごとにスタイルを当てたい時
＊外部リンク・PDFリンクだけ色を変えたい時
まとめ
・属性をそのままCSSでデザインするときは [ ] で囲う
・属性セレクタは「classを使わなくても、属性をそのまま使ってしまえ！」という発想で使えるCSSの便利ワザ
HTMLにすでに書かれている情報をうまく活かしてスッキルしたコードが書けるようになります。
次回は…擬似クラスとは？:focusや:hoverで覚えよう！
コメント