【コピペでOK】属性セレクタでラクしよう
昔からあるんですが、意外と知られていない事も多いCSSの属性セレクタ。
最近は短期カリキュラムのスクールが増えてる事もあり、教わる機会こそ減っているのですが、実践の場ではとっても役立ちます。
ただ、ちょっとネックなのがその書式。まとめておきましたのでコピペでどうぞ。
最後には具体的な活用方法も紹介しています。
この記事で分かること
- そもそもセレクタ・属性とは
- 知っておくと便利な属性セレクタ一覧
この記事の著者
- フリーランス
- Webデザイナー兼UI/UXデザイナー
まずはおさらい。セレクタって？属性って？
セレクタとは
CSSを設定する対象です。
以下の例ではpがセレクタです。
/* p要素の文字を赤色にする */
p{
color:red;
}
属性とは
属性とは、HTML要素に各種補足情報を加える時に使われます。
HTMLの開始タグに「属性=”属性値”」のように設定します。
<!-- 属性：href 属性値：index.html -->
<a href="index.html">トップページへ</a>
<!-- 属性：src 属性値：logo.png -->
<img src="logo.png" />
属性って言われるとピンと来ないかもしれませんが、お馴染みの表記ですよね。
属性セレクタとは
属性セレクタを使うと「属性、もしくは属性値が〇〇に設定されているセレクタ」のような指定を行うことができます。
いろいろなバリエーションがあるので、早速見ていきましょう。
属性セレクタの書き方一覧
〇〇属性が付いている要素だけに適用したい
まずは、特定の属性を持っている要素だけを対象にできる属性セレクタです。
/* 対象セレクタ：class属性が付いているp要素 */
p[class]{
color: red;
}
<p class="class">Sample1</p><!-- 赤くなるのはこっちだけ -->
<p>Sample2</p>
属性値が〇〇の要素だけに適用したい
こちらは、属性の値ごとに設定できるセレクタです。
/* 対象セレクタ：class属性の値が「red」のp要素 */
p[class="red"]{
color: red;
}
<!-- ↓赤くなる -->
<p class="red">Sample1</p>
<!-- ↓ならない -->
<p class="blue">Sample2</p>
<!-- ↓ならない -->
<p class="red blue">Sample3</p>
注意するのは3番目の例。
属性値が正確に「red」でなくてはいけないので「red blue」は対象外になります。
それでは困る。「red blue」も赤くしたいという時には、次のセレクタが役に立ちます。
属性値に〇〇を持っている要素全てに適用したい
属性式の「=（イコール）」の前に「~（チルダ）」を加えると、特定の属性値が含まれている全要素を対象にすることができます。
/* 対象セレクタ：属性値の一つにredを持っているp要素 */
p[class~="red"]{
color: red;
}
<!-- ↓赤くなる -->
<p class="red">Sample1</p>
<!-- ↓赤くなる -->
<p class="red blue">Sample2</p>
属性値が〇〇から始まる要素だけに適用したい（前方一致）
「=（イコール）」の前に「^（キャレット）」を加えると、特定のキーワードから始まる属性値を持っている要素を対象にできます。
だんだんディープな設定になってきましたね。
/* 対象セレクタ：「red」から始まる属性値を持っているp要素 */
p[class^="red"]{
color: red;
}
<!-- ↓赤くなる -->
<p class="red">Sample1</p>
<!-- ↓赤くなる -->
<p class="red-text">Sample2</p>
<!-- ↓ならない -->
<p class="text-red">Sample3</p>
属性値が〇〇で終わる要素だけに適用したい（後方一致）
先程と逆で、「=（イコール）」の前に「$（ドル）」を加えると、特定キーワードで終わる属性値を持っている要素が対象になります。
/* 対象セレクタ：「red」で終わる属性値を持っているp要素 */
p[class$="red"]{
color: red;
}
<!-- ↓赤くなる -->
<p class="red">Sample1</p>
<!-- ↓ならない -->
<p class="red-text">Sample2</p>
<!-- ↓赤くなる -->
<p class="text-red">Sample3</p>
属性値のどこかに〇〇を含む要素だけに適用したい（部分一致）
「=（イコール）」の前に「*（アスタリスク）」を加えると、特定キーワードがどこかに含まれる属性値を持つ要素が対象になります。
/* 対象セレクタ：「red」が含まれる属性値を持っているp要素 */
p[class*="red"]{
color: red;
}
<!-- ↓赤くなる -->
<p class="red">Sample1</p>
<!-- ↓赤くなる -->
<p class="red-text">Sample2</p>
<!-- ↓赤くなる -->
<p class="text-red">Sample3</p>
<!-- ↓赤くなる -->
<p class="text-red-text">Sample4</p>
さあ、使い方はわかったけど、細かすぎてどんな時に役立つのかイメージが沸かない、という方。
例えばこんな時に便利です。
属性セレクタはこんな時に役立ちます
a要素：リンク先が未設定の時に
例えばブログなどで「次の記事」が存在しない場合は薄いグレーにしておく、なんて事がカンタンにできます。
/* リンク先が未設定のa要素は薄いグレーにしておく */
a[href="#"]{
color: #999;
}
<a href="#">次の記事へ</a>
<a href="prev.html">前の記事へ</a>
a要素：リンク先の内容で見た目を変える
リンク先が別ウインドウで開く(target=”_blank”)、pdfファイルである(href属性値がpdfで終わる)等、a要素の内容ごとに細かくスタイルを作り分ける事もできます。
a[target]{
/* target属性が使われているa要素のスタイル */
}
a[href$="pdf"]{
/* href属性値が「pdf」で終わるa要素のスタイル */
}
input要素：フォーム要素のチューニング
一行テキストやラジオボタン、チェックボックス等、いろんなフォーム部品を網羅しているinputタグ。
その違いはtype属性で判断できるので、属性セレクタを使えば個別にスタイルシートを設定する事ができます。
input[type="text"]{
/* 1行テキスト入力欄のスタイル */
}
input[type="radio"]{
/* ラジオボタンのスタイル */
}
input[type="checkbox"]{
/* チェックボックスのスタイル */
}
まとめ
今回紹介した属性セレクタ、実践の場でとても役に立ちます。
「~」とか「$」とかを使い分けるのがちょっと厄介だと思うので、このページからコピペしてぜひご活用を。
ところで。最近は「短期間でWebデザイナーを目指す」みたいなスクールも多いわけですが、時短するということは、何かしらの学習がカットされているという事。
そんな時削除の対象になるのって、こうした「あれば便利だけどなくても支障はない」テクニックだったりするので、ちょっと残念なんですよね。
