今回は、「CSSセレクタ」 について解説していきたい思います。
主に、ブログでCSSデザインを導入する場合を想定 して、基本編・応用編の２回に分けて解説を進めて行きます。
今回は、基本編として、CSSセレクタについて簡単に解説した後、よく使う「基本のセレクタ」を紹介していきます。
※ ブログでCSSを使用する場合は、お使いのブログがCSSの使用に対応している必要があります。
目次
CSSセレクタとは？
「CSS」を使うと、HTMLの特定の要素を指定して、その要素のデザインをカスタムすることができます。
そのとき、どのHTML要素をカスタムするかを指定するために使用するのが「CSSセレクタ」 です。
今回は、このCSSセレクタの中でも、使用頻度の高いものや、ブログで使えそうなものを紹介 していきたいと思います。
カスタム対象のクラスやIDの確認方法
以下のページで、ブラウザを使って、HTML要素のクラス名やID名を確認する方法を紹介しています。
ブログ構成要素のクラス名などを確認したい場合は、上記のページを参考にしてください。
記事中で紹介するコードの表示確認方法【ブログ向け】
今回の記事の内容は、HTMLやCSSが使用可能なブログであれば、紹介するコードを投稿にコピペするだけで表示できるようになっています。
はてなブログの場合
例えば、はてなブログの場合であれば、「記事を書く」のプレビュー機能から記事中で紹介するコードの表示を確認できます。
見たまま(HTML編集)モード、HTMLモード、はてな記法の場合は、プレビュー(もしくはリアルタイムプレビュー)で確認することができます。
Markdownモードについては、他のモードよりも少し設定が面倒なので、「記事を書く」ページで一時的にMarkdown以外のモードを選択して表示の確認を行ってください。
CSSファイルから試す場合
CSSファイルを使用する場合、記事中で紹介するコードCSS部分は<style>タグの中身だけをコピーして試してください。
よく使う「基本のセレクタ」
要素の指定
HTML要素を指定することでカスタム対象としたいHTML要素を指定することができます。
実際の指定方法は以下のような感じです。
<div>要素の指定</div> <style> div { color: green; } </style>
div要素内の文字が緑色になるように指定しています。
表示は以下のような感じになります。
ID名の指定
IDは#記号を使って指定します。
実際の指定方法は以下のような感じです。
<div id='any-id'>ID名の指定</div> <style> #any-id { color: green; } </style>
IDがany-idである要素の文字が緑色になるように指定しています。
表示は以下のような感じになります。
クラス名の指定
クラス名は.記号を使って指定します。
実際の指定方法は以下のような感じです。
<div class='any-class'>クラス名の指定</div> <style> .any-class { color: green; } </style>
クラス名がany-classである要素の文字が緑色になるように指定しています。
表示は以下のような感じです。
要素名＋クラス名で指定
要素とクラス名の両方を指定することもできます。
要素に続けてクラス名を指定する ことで、そのクラス名が含む要素にCSSが適用されます。
実際の指定方法は以下のような感じです。
<p class='any-class'>要素名＋クラス名で指定</p> <div class='any-class'>クラス名のみ一致</div> <p>要素のみ一致</div> <style> p.any-class { color: green; } </style>
クラスany-classを含むp要素の文字色が緑色になるように指定しています。
表示は以下のような感じです。
要素名とクラス名の両方が一致する「要素名＋クラス名で指定」の部分の文字だけが、緑色となります。
「クラス名のみ一致」と「要素のみ一致」の部分には、CSSは適用されません。
特定の複数クラスを持つ要素を指定
クラス名を続けて指定することで、複数クラスを持つ要素を指定することもできます。
実際の指定方法は以下のような感じです。
<div class='any-class-1 any-class-2'>特定の複数クラスを持つ要素を指定</div> <div class='any-class-1'>一部のクラスのみ一致</div> <style> .any-class-1.any-class-2 { color: green; } </style>
クラスany-class-1とクラスany-class-2の両方を含む要素の文字色が、緑色となります。
表示は以下のような感じです。
両方のクラスを持つ「特定の複数クラスを持つ要素を指定」の部分の文字が緑色となります。
「一部のクラスのみ一致」の部分には、CSSは適用されません。
複数セレクタの指定
,記号を使って複数のセレクタを指定することができます。
実際の指定方法は以下のような感じです。
<div id="any-id">複数セレクタの指定 その１</div> <div class="any-class">複数セレクタの指定 その２</div> <div class="other-class">指定外の要素</div> <style> #any-id,.any-class { color: green; } </style>
ID名がany-idか、クラスにany-classを含む要素の文字が緑色になります。
表示は以下のような感じになります。
IDがany-idである「複数セレクタの指定 その１」と、クラス名がany-classである「複数セレクタの指定 その２」の部分の文字が緑色となります。
どちらの指定にも当てはまらない「指定外の要素」の部分には、CSSは適用されません。
子孫セレクタの指定
半角スペースを使って、指定の親要素内の全ての子孫要素を指定することができます。
実際の指定方法は以下のような感じです。
<div class='parent'> <p>これは<span>子孫セレクタの指定</span>です</p> </div> <style> .parent span { color: green; } </style>
parentクラスを持つ要素以下にある、すべてのspan要素の文字色が緑色となります。
表示は以下のような感じになります。
上記の画像のように、対象となる「子孫セレクタの指定」の部分だけが緑色になります。
子セレクタの指定
先ほど紹介した、子孫セレクタでは、親セレクタ以下の要素がすべて対象となりますが、親セレクタの子要素だけを指定することも可能です。
>記号を使う事で子要素だけを指定することができます。
<ul> <li>こちらは<span>対象</span>です</li> <li><div>こちらは<span>非対象</span>です</div></li> </ul> <style> li > span { color: green; } </style>
li要素の子要素の中で、span要素の文字色が緑となるように指定しています。
表示は以下のような感じになります。
上記画像のように、指定の対象となる「対象」の部分が緑色となります。
「非対象」の部分のspan要素は、li要素の"子孫要素"ではありますが、ここで指定した"子要素"ではないため、CSSは適用されていません。
まとめ
今回は、CSSセレクタの中でも、よく使う「基本のセレクタ」について解説してみました。
本ブログでも、CSSに関する記事を複数投稿しています。
大部分の記事は、今回の「基本編」の範囲で試せる内容となっているので、ぜひ一度見てみてください。
次回は、より詳細なカスタマイズのための「応用セレクタ」を紹介したいと思います。