属性セレクタとは、classなしでもデザインできる便利ワザ！

HTMLやCSSでデザインをするとき、classをつけないとスタイルを変えられないと思っていませんんか？
実は、属性セレクタを使えば、classやidを使わずに特定の要素だけにデザインを適用できます。

属性とは（おさらい）

属性とは「タグの中に書かれている　ひとことメモ　を見て、CSSデザインを当てる方法です！
＊属性を理解する記事はこちら→「 属性 」って何？ タグだけでは物足りない！属性で伝わるhtml

class名を使ったデザインの仕方

・テキストボックスを作ってみましょう！

これは、クラス名（text-box)を使ってCSSでデザインする方法です。
でも実は…
クラス名をつけなくても、CSSでデザインできる方法があるんです。

それが属性セレクタです！！

属性セレクタとは

簡単に言うと…
＊＊「タグの中にすでに書いてある’’属性’’を使って、CSSデザインする方法」＊＊です。

＊ “type-text”ってもう書いてあるから、それ使っちゃえばよくない？っていう発想！（笑）

クラスも属性

実はclassも属性のひとつです！

・もちろん属性なので、属性セレクタとして使うことはできますが…

・classはよく使われるので、専用の書き方（ドット.クラス名）があります。
　　　それがこちらの記事→「CSSセレクタってなに？」初心者にも超わかりやすく解説

属性セレクタはこんな時に便利！

＊クラスを追加したくない時
＊フォームのタイプごとにスタイルを当てたい時
＊外部リンク・PDFリンクだけ色を変えたい時

まとめ

・属性をそのままCSSでデザインするときは　[ ] で囲う
・属性セレクタは「classを使わなくても、属性をそのまま使ってしまえ！」という発想で使えるCSSの便利ワザ
　HTMLにすでに書かれている情報をうまく活かしてスッキルしたコードが書けるようになります。
次回は…擬似クラスとは？:focusや:hoverで覚えよう！