１番はじめにくる要素なので、first-childを指定したところ、それが全く効いていなくてどうしてかなぁと思い調べてみると、わたしの勘違いな覚え方によるものだったことがわかり、ついでにいろいろ再確認したのでそのあたりのまとめです。
擬似クラス『 first-child 』への勘違い
例えば、以下のような構成になっていて、sampleクラスの１番はじめにくるh2要素のスタイルを指定したいとします。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="sample"> <p>ここはp要素</p> <p>ここはp要素</p> <h2>ここはh2要素</h2> <p>ここはp要素</p> <p>ここはp要素</p> <h2>ここはh2要素</h2> <p>ここはp要素</p> <p>ここはp要素</p> </div> |
ここで、わたしは、「.sample h2:first-child」と指定すればいいなと思って書いてみたけど、全くスタイルが効いていなくてはてな??となりました。 わたしは、この指定で最初にくるh2にスタイルできると思っていたのですが、実は違っていて調べてみると
:first-child擬似クラス ある要素内で最初に現れる子要素を対象にスタイルを適用します。
ということらしく。。。そうなのです。種類に関係なく要素を数えるため、上記の書き方だとだめなのです。
この場合の１番はじめにくるh2要素のスタイルを指定したい場合は、
|
1 |
.sample h2:first-of-type｛｝ |
とすると、１番はじめにくるh2要素にちゃんと指定したスタイルが適用されます。
最初の要素やn番目の要素をスタイルするときに使う擬似クラス
表にしてみました。
| 擬似クラス | 適用対象 | 書式 |
|---|---|---|
| first-child | 要素内の最初の子要素 | 要素名:first-child {プロパティ名:値;} |
| first-of-type | 最初のその種類の要素 | E:first-of-type {プロパティ名:値;} |
| nth-child(n) | n番目の子となるE要素 | E:nth-child(n) {プロパティ名:値;} |
| nth-of-type(n) | n番目のその種類の要素 | E:nth-of-type(n) {プロパティ名:値;} |
nの部分には、
- 奇数を表すodd
- 偶数を表すeven
|
1 2 3 4 5 |
//奇数 要素:nth-child(odd) { } //偶数 要素:nth-child(even) { } |
- 奇数を表す2n+1
- 偶数を表す2n+0
|
1 2 3 4 5 |
//奇数 要素:nth-child(2n+1) { } //偶数 要素:nth-child(2n+0) { } |
が使えます。
ざっくりまとめると、いちばん初めを指定したいときは、first-child 要素指定して尚且ついちばん初めの時は、first-of-type、特定のタグでn番目と指定したいときはnth-of-typeと書く。
ただし、first-child以外は古いIEには対応していないので、そのあたりは柔軟に隣接セレクタを使ったりしないといけない。
