この要素ってCSSでどうやって指定するんだっけ?といったことがあった時の「疑似要素と疑似クラス」の指定方法まとめです。
これらを使いこなせるとスタイル作成が楽になったり、さまざまなデザインにCSSで対応できるようになるので、覚えて損はないものたちです。
【CSSの基本・セレクタとは】
CSSでスタイルを当てるときに「どの要素か」の部分に書くものをCSSセレクタと呼びます。以下のコードなら「p」の部分がセレクタです。
ちなみに「display」がプロパティ、「inline-block」は値です。CSSはこの3つの記述によってスタイルが設定されます。
p {
display: inline-block;
}
疑似要素と疑似クラスの違い
疑似要素では要素の前や後ろに追加する、1文字目や1行目だけを変更するなどの「指定した要素の一部」に対してスタイルの指定をするものです。
疑似クラスでは「指定した要素全体」に対してスタイルを適用させられます。その要素自体が何かしらの状態であったり、また何番目にある要素に、といった形でスタイルを当てることができます。
疑似要素と疑似クラス一覧
疑似要素
before | 要素の先頭 |
after | 要素の末尾 |
first-letter | 要素の1文字目 |
first-line | 要素の1行目 |
selection | 要素をドラッグした時 |
placeholder | input や textarea の要素のプレイスホルダー |
marker | リストの記号部分 |
疑似クラス
root | ドキュメントルート要素 |
link | リンク要素 未訪問の場合 |
visited | リンク要素 訪問済の場合 |
active | アクティブ化(クリック)した時 |
hover | カーソルが要素の上にのった時 |
focus | ボタンや入力欄などにカーソルを置いている状態 |
lang | |
target | ターゲットの要素 |
enabled | 有効状態の場合 |
disabled | 無効状態の場合 |
checked | チェックボックスやラジオボタンでチェックされている状態 |
empty | 子要素がない要素 |
not | 指定したセレクタに一致しない場合 |
nth-child | 兄弟要素の中で指定した数字の位置 |
nth-last-child | 兄弟要素の中で指定した最後からの位置 |
first-child | 兄弟要素の最初 |
last-child | 兄弟要素の最後 |
only-child | 1つのみの子要素の場合 |
nth-of-type | 同じ種類の兄弟要素の中で指定した数字の位置 |
nth-last-of-type | 同じ種類の兄弟要素の中で指定した最後からの位置 |
first-of-type | 同じ種類の兄弟要素の最初 |
last-of-type | 同じ種類の兄弟要素の最後 |
only-of-type | 同じ種類の子要素がない場合(1つの種類の子要素) |
【参照】疑似クラスと疑似要素 – 参照セクション | MDN
コードの書き方
指定方法はセレクタの後に疑似要素や疑似クラスを追加しますが、書き方の違いがあります。疑似要素はコロンが2つ、疑似クラスはコロン1つで指定します。
/* 疑似要素 */
p::before {
content: 'HELLO';
display: inline-block
}
/* 疑似クラス */
p:first-child {
display: inline-block;
}
現在では疑似要素にはコロンを2つ付けることになっていますが、実は古くから使われている「before, after, first-letter, first-line」の疑似要素はコロン1つでもスタイルが適用されます。
疑似要素にコロンを2つ付けるというのはCSS3から決まったことなのでそれ以前のものはコロン1つでも適用されるようになっているようです。
疑似要素と疑似クラスを併用する際は記述順に注意
疑似要素と疑似クラスを併用する場合は「:疑似クラス::疑似要素」の順で記述します。
「::疑似要素:疑似クラス」だと反映されないので書き方の順序はしっかりおさえておきましょう。
例として以下のコードでは ::before:last-child
で指定した要素は適用されません。
.item:first-child::before {
content: 'HELLO';
display: inline-block;
}
.item::before:last-child {
content: 'HELLO';
display: inline-block;
}
上記コードの実装
こんにちは
こんにちは
::before:last-child
を使用して実装した上記は2つ目の「こんにちは」の前に「HELLO」がついていないことが確認できたかと思います。:last-child::before
に書き方を修正するとちゃんと表示されます。
:last-child::beforeに順序を変更
こんにちは
こんにちは
【::before, ::after】 要素の前後に追加
::before
は指定した要素の前に、::after
は後ろに追加されます。
この2つは contentプロパティを指定しなければ表示されません。文字列を追加する場合は content: '文字列';
、スタイルでつくる要素や画像などは空にして追加します content: '';
。
content: '';
の場合、他にも必要なプロパティがあります。
height(高さ)やwidth(横幅)といった表示される領域を指定するプロパティと、
displayプロパティで inline-block や block などの値を設定、もしくは positionプロパティで absolute を指定します。
.box {
background: #95d3ba;
width: 50px;
height: 50px;
}
.before_cont1::before {
content: '';
display: block;
width: 30px;
height: 30px;
background-color: #000;
}
.before_cont2::before {
content: '';
display: inline-block;
width: 30px;
height: 30px;
background-color: #000;
}
.before_cont3::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
background-color: #000;
}
上記コードの実装
cont1
cont2
cont3
【::first-letter, ::first-line】 1文字目・1行目のスタイル
::first-letter
で要素にあるテキストの1文字目のスタイル、::first-line
で要素にあるテキストの1行目のスタイルを指定できます。
.first_letter_change::first-letter {
font-size: 20px;
font-weight: 700;
color: green;
}
.first_line_change::first-line {
font-size: 20px;
font-weight: 700;
color: green;
}
上記コードの実装
初めの文字だけスタイルが変わります。
1行目のみスタイルが変わります。
2行目
3行目
最後の1文字(last-letter)や最後の行(last-line)といったものはないので、spanタグなどを使用して個別にスタイルを当てたりJSを利用してスタイルを当てる形になります。
【**-child】 子要素の順番を指定してスタイルを当てる
**-child
は子要素になっている要素の中で、何番目のものにスタイルを当てるかを指定するための擬似クラスです。
:first-child
… 指定した子要素の中で最初の要素
:last-child
… 指定した子要素の中で最後の要素
:nth-child(n)
… 指定した子要素の中でn番目の要素
:nth-last-child(n)
… 指定した子要素の中で最後からn番目の要素
:only-child
… 指定した子要素の中で1つしかない要素
上記のコードを使って指定した順番にある要素を指定することができます。要素の種類は関係なく、全ての兄弟要素を数えてその順番にあればスタイルが適用されます。
奇数や偶数の指定
特定の要素を複数設定したい場合は nth-child
を使用します。
奇数・偶数で指定したい場合、oddもしくはevenを記述します。
:nth-child(odd)
… 奇数
:nth-child(even)
… 偶数
「n」を使って計算式で指定することもできます。「n」は0から始まり、1、2、3と上がっていきます。
例えば :nth-child(3n)
なら「3 × n」で計算されます。0から始まるので 「3 × 0 = 0」「3 × 1 = 3」「3 × 2 = 6」「3 × 3 = 9」という数に当てはまる要素にスタイルが適用されます。
「○番目以降」の指定
特定の順番以降に適用したい場合は nth-child(n+3)
という形を使用します。n+3 なら「0 + 3 = 3」からスタート、nが1ずつ上がるので3番目以降が当てはまります。
3番目以降boxの背景を変える
「○番目まで」の指定
特定の順番以降に適用したい場合は n の前に「-」マイナスをつけて nth-child(-n+3)
という形を使用します。-n+3 なら「-0 + 3 = 3」からスタート、「-1 + 3 = 2」「-2 + 3 = 1」となるので、和(計算式の答え)が減っていきます。
3番目までboxの背景を変える
「○番目〜○番目まで」の指定
特定の順番内で指定したい場合は、「○番目以降」と「○番目まで」を組み合わせて指定します。
組み合わせる際にはコロンでつなげます。:nth-child(n+2):nth-child(-n+5)
2~5番目までboxの背景を変える
「○番目ごとに」の指定
3, 6, 9 といったように特定の数ごとに指定したい場合は nth-child(3n+3)
という形を使用します。プラスの後に最初に指定したい要素の順序、「3n」の「3」が上げていきたい数です。
3,6,9番目のboxの背景を変える
「○番目以外」の指定
「その順番以外」を指定したい場合は、セレクタの後に :not をつけて 擬似クラスをカッコ「()」で囲います。
:not(:nth-child(2))
2番目以外の背景を変える
【**-of-type】 子要素の順番を指定してスタイルを当てる
順番を指定する疑似クラスには **-of-type
もあります。基本の使い方は **-child
と同じです。
:first-of-type
… 同じ種類の子要素の中で最初の要素
:last-of-type
… 同じ種類の子要素の中で最後の要素
:nth-of-type(n)
… 同じ種類の子要素の中でn番目の要素
:nth-last-of-type(n)
… 同じ種類の子要素の中で最後からn番目の要素
:only-of-type
… 同じ種類の子要素の中で1つしかない要素
nth-child と nth-of-type の違い
**-child
と **-of-type
の違いは要素の順番の数え方です。ここでいう「種類」は「HTMLのタグ名」です。
nth-child の場合は要素の種類に関係なく子要素を数えます。
nth-of-type の場合はその要素の種類のみ数えます。
【:link, :visited, :hover, :active】
この4つのクラスは記述する順番によって指定した通りに表示されないことがあります。リンクに対してそれぞれの状態でスタイルを設定する際は特に注意が必要です。
以下の順序で記述しましょう。
- :link
- :visited
- :hover
- :active
カテゴリー : HTML-CSS