いつか役立つ!知っておくと便利なCSSセレクタ5選
CSSはその登場当初から現在に至るまでにさまざまな進化を遂げており、ひと昔であれば複雑なJavaScriptで書かないといけないような所作も、驚くほど簡単にできるようになりました。
とりわけCSSの進化が著しかったのはCSS3(CSS Level 3)が登場してからで、単純な挙動しかできなかったこれまでのCSSに、複雑な処理を実装できるようになりました。
それぞれセレクタやプロパティはCSS3に次ぐ次世代のCSSだと評されています。
そこで今回は、CSS Level 4で登場した、知っておくと便利なCSSセレクタをご紹介します。
知っておくと便利なCSSセレクタ5選
CSS Level 4には、例えばnth-childのようなよく知られているセレクタもたくさんありますが、それ以外にもユニークなセレクタが含まれています。
それらの中には新しい多くの便利な擬似セレクタもあり、覚えておいて損はありません。
早速それらのセレクタを確認してみましょう。
1. :matches()
*:matches()*擬似クラスは複数のセレクタをたった1行で簡潔に記すことができるものです。
例えば、以下のようなコードがあるとします。
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
color: #0060e6;
}
こうしたコードは、同じ規則で並んでいながらも、それらをそのまま並列して記載しているので、コードが冗長になりがちです。
しかし、*:matches()*を使えば、このような規則的な並列を有したコードを、下記のようにシンプルにまとめることができます。
:matches(section, article) :matches(h1, h2, h3, h4, h5, h6) {
color: #0060e6;
}
これを使えば、例えばリンクの通常時とホバー時などで色を変えることも簡単にできます。
:matches(:hover, :focus, :active) {
color: #0060e6;
}
ただし、現状*:matches()はSafariには対応していますが、FirefoxやChromeではベンダープレフィックス対応で:any()*擬似クラスを使うことになっているので、下記のように併記したほうがよさそうです。
:-webkit-any(:hover, :focus, :active) {
color: #0060e6;
}
:-moz-any(:hover, :focus, :active) {
color: #0060e6;
}
また、*:matches(:matches())のように入れ子構造にすることはできず、:not()*とも組み合わせて利用することはできないので、注意しましょう。
2. :any-link
先ほど紹介した*:matches()を使えば、リンクのスタイリングを設定するのも驚くほど簡単に行うことができます。
しかし、リンクに限って言えば、もっと簡単な方法があります。
それが、:any-link*擬似クラスを使うことです。
この擬似クラスは、すべてのハイパーリンクのアンカーテキストに同じスタイルを加えることができます。
:any-link {
color: #0060e6;
}
HTML5に限って言えば、href(ハイパーリファレンス)属性を設定できるHTMLタグ(要素)は、aタグだけでなくlinkタグやareaタグなどがあります。
これらのタグに*:any-linkを設定することで、:matches(:link, :visited)*と同じ挙動を実装することができます。
3. :placeholder-shown
テキストボックスやテキストエリアのように、プレイスホルダーを設定することができる要素があります。
プレイスホルダーのテキストはHTMLタグのplaceholder属性で設定することができますが、このプレイスホルダーのテキストはCSSの*:placeholder-shown*擬似クラスを使ってスタイリングすることができます。
:placeholder-shown {
opacity: 1;
color: #cccccc;
background: #f0f8ff;
font-weight: bold;
border: 1px solid red;
}
この*:placeholder-shownはインプット要素全体に対してスタイリングを行うことができます(つまり、プレイスホルダーテキストが表示されている間のボックス全体のスタイリングとなります)。
一方で、コロンを2つ重ねた::placeholder*擬似要素は、プレイスホルダーテキストのみのスタイリングとなります。
つまり、先ほどのコードは以下のコードでも代用できますが、borderの適用範囲に注意が必要です。
::placeholder {
opacity: 1;
color: #cccccc;
background: #f0f8ff;
font-weight: bold;
border: 1px solid red;
}
注意したいのは、:placeholder-shownは擬似クラスであり、::placeholderは擬似要素と呼ばれ、根本的に設計思想が異なることです。
前者はある状態における要素のスタイリングであり、後者はDOMの中では扱うことのできない可視要素そのものだということを理解して、使い分けるのがよいでしょう。
4. :user-error
同じく、テキストボックス関連の擬似クラスをご紹介します。
エラーを知らせる時のスタイリング方法である、:user-error擬似クラスです。
もちろん、エラーを知らせるためのスタイリング方法ですから、デフォルトでは表示されず、何らかのユーザー操作のあとにエラーが発生したときにだけ表示されます。
例えば、ユーザーが送信ボタンを押してフォームを送信しようとしたときに、required属性のついた入力必須のインプットに何も入っていない場合、このスタイルが指定されて入ればスタイリングが反映される、という具合です。
:user-error {
background: #ffc0cb;
color: #dc143c;
border: 2px solid red;
}
ただし、残念ながらこの*:user-error擬似クラスは全てのブラウザベンダーで実装されているわけではありません。
場合によっては、:invalid擬似クラスや:required*擬似クラスを使って、ユーザーにエラーを知らせる方法も検討してみましょう。
:invalid {
background: #ffc0cb;
color: #dc143c;
border: 2px solid red;
}
参考:
コーディング初心者こそ知っておきたい「CSS擬似クラス」超入門
▲ :invalidや*:required*はこちらの記事で紹介しています。
5. :root
:rootは次第に有名になりつつある擬似クラスの一つです。
ルート要素にスタイルを適用するためのものです。
ルート要素は最上位の階層に位置する要素のことで、HTML文書では全体をマークアップしているのがルート要素となります。
:root{
background-color: #fafad2;
}
body{
background-color: #f0f8ff;
}
上記のようなコードの場合、backgroundの色は*:root*で指定した色が全体的に敷き詰められ、bodyで指定した色はルート要素の内側に表示されます。
なお、:rootには*CSS変数(CSSカスタムプロパティ)*を使うこともできます。
CSS変数を使うことでデザインが圧倒的に捗るので、ぜひ使い方をチェックしてみるとよいでしょう。
参考:
CSSでプログラミング?圧倒的にデザインが便利になる「CSSカスタムプロパティ」入門|ferret フェレット
まとめ
どれも便利で知っておいて損はないCSSセレクタですが、この他にも便利なものはまだまだあります。
上記のセレクタは旧来の方法でも利用することができますが、コーダーやデザイナー、フロントエンドエンジニアが積極的にチームに伝えていくことで、チーム全体で利用価値を高めていくことができます。
便利なCSSセレクタを取り入れて、コーディングに役立ててみましょう。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- アンカーテキスト
- アンカーテキストとは、ホームページから他のページに移動する文字リンクのことです。ホームページにあるアンカーテキストをクリックすると、接続処理がなされているホームページに自動的に移り変わります。これを「ジャンプする」と言う場合もあります。通常アンカーテキストは青色で表示されておりアンダーラインが引いてあるため、通常の文字と簡単に見分けられます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング