CSSセレクタの詳細－押さえておきたいスタイルシートの基本
- 1 はじめに
- 2 基本的なセレクタ
- 2-1 要素セレクタ（element selector）
- 2-2 クラスセレクタ（class selector）
- 2-3 IDセレクタ（ID selector）
- 2-4 属性セレクタ（attribute selector）
- 3 複合セレクタ（compound selector）
- 3-1 子孫セレクタ
- 3-2 子セレクタ (Child Selector)
- 3-3 隣接兄弟セレクタ (Adjacent Sibling Selector)
- 3-4 一般的な兄弟セレクタ（General Sibling Selector）
- 4 疑似クラスと疑似要素
- 4-1 疑似クラス (Pseudo-class)
- 4-2 疑似要素 (Pseudo-element)
- 5 まとめ
はじめに
ホームページを制作するときにデザインを担当するのはCSS（カスケーディング・スタイル・シート）です。一般的にスタイルシートやスタイルと呼ばれるCSSは、テキストの色から細かな配置、動きに至るまで、様々な項目を規定できます。では、それをどのようにそれぞれの部分に適用するのか、という問題があります。セレクタとは、当にそのスタイルをどこに、そしてどのように適用するのかを指定するための指定をする部分です。
ここのテキストは赤に、この部分は隣と30ピクセル空ける、などをどのようなやり方で書けばいいのかが決まっています。今回はそのセレクタの種類、組み合わせなどについて細かく説明していきます。
[toc]
基本的なセレクタ
要素セレクタ（element selector）
要素セレクタは、HTMLの要素名に直接指定します。つまり、HTMLのタグのことです。以下の例では、すべての要素（段落）のテキスト色を赤に設定しています。要素セレクタはタイプセレクタと呼ばれることもあります。
2番目はリストの各項目のテキストの大きさを14ピクセルに指定しています。
css
|
1 2 3 4 5 6 7 |
p { color: red; } li { font-size:14px; } |
このように要素セレクタは、タグを指定して、そのタグが出てきたときにはこのようなスタイルにするというためのセレクタです。
どのタグにも付けられますが、実際には同じタグ全てに同じスタイルが付くということはそれほど多くはありません。そのため、次項で説明するクラスセレクタが大切になります。
クラスセレクタ（class selector）
”クラス”という言葉は、日本語と英語で微妙に違う印象があります。クラスは次に説明するIDと共に、この部分にはこのスタイルを充てることができますよと言う目印で、クラスはページ内に複数使えるがIDは1カ所しか使えないという覚え方をしておくと使い間違えが少ないです。
クラスセレクタはスタイルを描くときにドット（.）で始めます。以下の例では、class=”highlight”が指定された要素の背景色を黄色に設定しています。
注意しなくてはいけないのは、HTML内では、class=”highlit”とドットはいりませんが、スタイルを描くときには.highlightと、それがクラスであることを明示する必要があるということです。
css
|
1 2 3 |
.highlight { background-color: yellow; } |
IDセレクタ（ID selector）
IDセレクタはハッシュ（#）で始まります。以下の例では、id=”header”が指定された要素の背景色を青に設定しています。
IDセレクタはその名が示すとおりID（identification）ですので、ページ内に一つしか使えません。同じタグにIDとクラスがあって競合した場合には、IDが優先されます。
css
|
1 2 3 |
#header { background-color: blue; } |
属性セレクタ（attribute selector）
属性セレクタは、特定の属性を持つHTML要素にスタイルを適用します。以下の例では、type=”text”が指定された<input type=”text” />
要素の幅を200pxに設定しています。
属性とは<input type=”text”> <a alt=”image,jpg”>のtypeやaltに当たる部分です。
css
|
1 2 3 |
<pre class="lang:css decode:true " title="CSS">input[type="text"] { width: 200px; }</pre> |
複合セレクタ（compound selector）
複数のセレクタを組み合わせることで、より具体的な要素のグループを対象とすることができます。
子孫セレクタ
子孫セレクタ（空白で区切られたセレクタ）は、特定の要素の子孫（子、孫、曾孫、など）を対象とします。以下の例では、要素の中のすべての要素の文字色を青に設定しています。
css
|
1 2 3 |
div p { color: blue; } |
子セレクタ (Child Selector)
子セレクタ（>で区切られたセレクタ）は、特定の要素の直接の子だけを対象とします。以下の例では、要素の直接の子である要素だけの文字色を赤に設定しています。
css
|
1 2 3 |
div > p { color: red; } |
隣接兄弟セレクタ (Adjacent Sibling Selector)
隣接兄弟セレクタ（+で区切られたセレクタ）は、同じ親を持ち、直後に続く兄弟要素だけを対象とします。以下の例では、要素の直後に続く要素の文字色を緑に設定しています。
css
|
1 2 3 |
h1 + p { color: green; } |
一般的な兄弟セレクタ（General Sibling Selector）
一般的な兄弟セレクタ（~で区切られたセレクタ）は、同じ親を持ち、その要素の後に続くすべての兄弟要素を対象とします。以下の例では、要素の後に続くすべての要素の文字色を紫に設定しています。
css
|
1 2 3 |
h1 ~ p { color: purple; } |
疑似クラスと疑似要素
疑似クラス (Pseudo-class)
疑似クラスは、要素の特定の状態を対象とするセレクタです。以下にいくつかの例を挙げます。
:hover：要素にマウスカーソルが乗ったときに適用されます。以下の例では、
css
|
1 2 3 |
button:hover { background-color: green; } |
:focus：要素がフォーカスを持っているとき（たとえば、テキストフィールドにカーソルが置かれたとき）に適用されます。以下の例では、要素がフォーカスを持っているときの境界線色を青に設定しています。
css
|
1 2 3 |
input:focus { border-color: blue; } |
:nth-child(n)：要素が親のn番目の子であるときに適用されます。以下の例では、要素が2番目の子であるときの文字色を赤に設定しています。
css
|
1 2 3 |
li:nth-child(2) { color: red; } |
疑似要素 (Pseudo-element)
疑似要素は、要素の特定の部分を対象とするセレクタです。以下にいくつかの例を挙げます。::before：要素の内容の前に生成される内容を対象とします。以下の例では、要素の内容の前にアスタリスクを挿入しています。
css
|
1 2 3 |
p::before { content: "*"; } |
::after：要素の内容の後に生成される内容を対象とします。以下の例では、要素の内容の後にアスタリスクを挿入しています。
css
|
1 2 3 |
p::after { content: "*"; } |
::first-letter：要素の最初の文字を対象とします。以下の例では、要素の最初の文字のフォントサイズを2倍に設定しています。
css
|
1 2 3 |
p::first-letter { font-size: 200%; } |
まとめ
CSSセレクタはウェブデザインの基礎であり、それぞれの種類と使用方法を理解することで、ウェブページのさまざまな要素に対してスタイルを適用する能力が飛躍的に向上します。基本的なセレクタから複合セレクタ、疑似クラス、疑似要素に至るまで、全てのセレクタがあなたのデザインの道具箱を充実させ、あなたのウェブページを鮮やかに彩ることでしょう。
参考資料：
MDN Web Docs: CSSセレクタ
2023年10月19日 9:19 PM カテゴリー： CSS