ホームページ作成/HTML・スタイルシート(CSS)の基礎

CSSの「セレクタ」の書き方 再入門(CSS3対応版)(4ページ目)

スタイルの適用先を指定する「セレクタ」には、様々な条件で対象を絞り込める書き方が用意されています。うまく活用すれば、いちいちHTML側にclass属性やid属性で名前を割り振らなくても、CSS側だけで柔軟に適用先を限定できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

特定の属性値が、「指定の文字列」か「指定の文字列にハイフンを加えた文字列」を持つ要素だけを適用対象にする (CSS2)

以下のようにセレクタを記述すると、
  • 「γ」という文字列
  • 「γ」+ハイフン+「文字列」という形式の文字列
のどちらかが値として指定された「β属性」を持つ「α要素」に限定して適用対象にできます。
α[β|="γ"]
言語の表記方法いろいろ

言語の表記方法いろいろ

HTMLやCSSの言語表記では、単に「英語」を示す「en」のほか、「アメリカでの英語」を示す「en-us」や、「イギリスでの英語」を示す「en-gb」、「オーストラリアでの英語」を示す「en-au」などの表記方法があります。言語名と国名をハイフンで繋ぐ記述方法です。

日本語の場合も、単に日本語を示す「ja」のほかに、「日本での日本語」を示す「ja-jp」という記述方法もあります。

これらの言語表記に特化した「スタイルの適用対象の限定方法」として、このようなセレクタの書き方が用意されています。

例えば、「リンク先サイトの言語」を表す「hreflang属性」を加えたa要素で作ったリンクリストが以下のように記述してある場合を考えます。
<a href="jpn.html" hreflang="ja-jp">日本ページ</a>
<a href="usa.html" hreflang="en-us">アメリカページ</a>
<a href="uk.html" hreflang="en-gb">イギリスページ</a>
<a href="hk1.html" hreflang="en-hk">香港(英語)ページ</a>
<a href="hk2.html" hreflang="zh-hk">香港(中国語)ページ</a>
このとき、下記のようにCSSを記述すると、
a[hreflang|="en"] { color: red; }
英語ページへのリンクのみを装飾

英語ページへのリンクのみを装飾

右図のように、「hreflang属性に『en』か『en-』で始まる値を持つa要素」だけが赤色になります。


 

特定の属性値を1つでも含んでいる要素だけを適用対象にする (CSS2)

以下のように記述すると、空白文字で区切って複数の値を記述できる「β属性」に、「γ」という値が1つでも含まれている場合の、「α要素」に限定して適用対象にできます。
α[β~="γ"]

HTMLのa要素には、「rel属性」を加えて「現在のページから見たリンク先ページの関係」を示すことができます。例えば、
<a href="yug.html" rel="glossary">用語集</a>
と記述すると、リンク先のyug.htmlページが、現在のページに関係する「用語集」を提供しているページだと示すことができます。 このrel属性の値には、index、copyright、chapter、appendix、helpなど、空白文字で区切って複数の値を記述できます。例えば以下では、copyright(著作権)とhelp(ヘルプ)の2つを属性値に記述しています。
<a href="ch.html" rel="copyright help">著作権・ヘルプページ</a>
このとき、
a[rel~="help"] { color: red; }
上記のようにCSSを記述すると、rel属性の値に「help」という値を含んでいる場合だけを対象にして、赤色に装飾できます。

CSSのセレクタ記述方法(前半)

今回は、CSSのセレクタに関して、子孫関係・隣接関係にある要素を対象にする方法や、属性・属性値によって対象を絞る方法をご紹介致しました。CSSのセレクタには、もっと条件を細かく指定できる「疑似クラス」・「疑似要素」という書き方もあります。それらについては、次回の記事で詳しくご紹介致します。

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます