最初の要素やn番目の要素をスタイルするときに使う擬似クラスについてのいろいろ

1番はじめにくる要素なので、first-childを指定したところ、それが全く効いていなくてどうしてかなぁと思い調べてみると、わたしの勘違いな覚え方によるものだったことがわかり、ついでにいろいろ再確認したのでそのあたりのまとめです。

擬似クラス『 first-child 』への勘違い

例えば、以下のような構成になっていて、sampleクラスの1番はじめにくるh2要素のスタイルを指定したいとします。

ここで、わたしは、「.sample h2:first-child」と指定すればいいなと思って書いてみたけど、全くスタイルが効いていなくてはてな??となりました。 わたしは、この指定で最初にくるh2にスタイルできると思っていたのですが、実は違っていて調べてみると

:first-child擬似クラス ある要素内で最初に現れる子要素を対象にスタイルを適用します。

ということらしく。。。そうなのです。種類に関係なく要素を数えるため、上記の書き方だとだめなのです。

この場合の1番はじめにくるh2要素のスタイルを指定したい場合は、

とすると、1番はじめにくる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
  • 奇数を表す2n+1
  • 偶数を表す2n+0

が使えます。

ざっくりまとめると、いちばん初めを指定したいときは、first-child 要素指定して尚且ついちばん初めの時は、first-of-type、特定のタグでn番目と指定したいときはnth-of-typeと書く。

ただし、first-child以外は古いIEには対応していないので、そのあたりは柔軟に隣接セレクタを使ったりしないといけない。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る