50.疑似クラスって何？② ～ツリー構造疑似クラス～
予想外に数が多いことが判明し、このシリーズを続けようか悩まされます。
とはいえ、よく使うものとその周辺（仲間）については調べたいので、
ひとまず進めていきます。
本日はツリー構造疑似クラスについて。
では早速やっていきましょう。
ツリー構造疑似クラスって？
この疑似クラスは文書内のツリー構造に基づいてスタイルを適用できます。
文書内のツリー構造と言えば、そう！
HTMLですね。
HTMLの構造に対して条件を指定してスタイルを指定できるということなんですね。
使いどころたくさんありそうですよね。
さて、どんな種類の疑似クラスがあるのでしょう。
どんな種類があるの？
ツリー構造疑似クラスには以下の種類があります。
- :root
- :empty
- :nth-child
- :nth-last-child
- :first-child
- :last-child
- :only-child
- :nth-of-type
- :nth-last-of-type
- :first-of-type
- :last-of-type
- :only-of-type
お、多い…。
気を取り直して、やっていきましょう。
各疑似クラスについて
:root
これは通常<html>を指すようで、まんまルート要素を指定できる疑似クラスです。
ページを通して使う変数の定義などに使われるようです。
:empty
これは、セレクタで指定した要素の中が「からの状態」を指定できます。
:nth-child、:nth-last-child
これらは式「An + B」を用いて、兄弟要素の一覧から「該当する番号」で、かつ「指定したセレクタ」に該当する要素を指定できます。カウントは1からスタートして、last-childの方は末尾から数え始めます。
例えば、.testクラスが適用されている１０個の兄弟要素があったとしたら
.test:nth-child(2n+1){
}
とすることで、2n+1番目に該当する要素だけにスタイルを適用することができます。
Aは2、Bは１で固定。
nが0のとき、2 × 0 + 1 →1番目
nが1のとき 、2 × 1 + 1→3番目
・
・
・
nがnのとき→(2n+1)番目という具合に続いていきます。
奇数だけ指定したいとか、偶数だけ指定したいとか、
４の倍数だけ指定したいとか
そういう使い方ができます。
これは課題の中でも良く使う疑似クラスですね。
:first-child、:last-child
これは指定されたセレクタの兄弟要素のうち、最初(または最後)の要素を指定できる。
:only-child
セレクタで指定した要素に兄弟要素がない状態を指定できます。
使いどころがイマイチ見えません…。
指定したセレクタの子要素が１つだけの状態が欲しいタイミングとは…？
:nth-of-type、:nth-last-of-type
これは、指定したセレクタの兄弟要素で、同一セレクタを持つものだけをカウントして指定した番号に該当する要素にたいしてスタイルを適用できます。
:nth-childは兄弟要素で異なるタグ(セレクタ)要素があった場合でも、１カウントとして進めてしまいますが、こちらの:nth-of-typeは同一セレクタ要素のみを純粋にカウントしていきます。
:first-of-type、:last-of-type
これは指定したセレクタの兄弟要素の中で、
最初(最後)の同一セレクタの要素を指定できます。
:only-of-type
指定したセレクタと同一の兄弟要素がいない要素を指定できます。
これはonly-childよりも使いやすそうです。
ただ、じゃあどこで使うかと言われるとイメージ湧きませんね。
いろいろありましたね。
１行ごとに色違い背景とか、横並びの内側にだけマージン適用とか数式で条件を表すことができればいろいろ使えそうな疑似クラスたちですね。
ただ、昨日も思いましたが、こうした指定ってjQueryでもできそうですよね。
なるべくはCSSで完結するのが理想なんでしょうか？
今日のまとめ
- 疑似クラスでHTMLの構造に対してスタイルを適用できる
- このようなクラスをツリー構造疑似クラスと呼ぶ
- childやof-typeは使う場面が多そう
本日も昨日に引き続き疑似クラスについてやってきました。
いろいろな場面で使うので、よく使う物、似た物は使い分けできるようにしておきたいです。
では、また。
