article:last-childが効かない

しょうもない事だけど、ちょっとハマったのでメモ残す。

子要素articleの最後だけにスタイルを指定したい

たとえばarticleの上下に線を引きたい時、

(HTML)
<section>
  <article><p>text.text.text</p></article>
  <article><p>text.text.text</p></article>
  <article><p>text.text.text</p></article>
  <article><p>text.text.text</p></article>
</section>
(CSS)
section article {
  border-top: 1px solid #AAA;
}

こうすると最後のarticleだけ上線しか入らないので、

(CSS)
section article:last-child {
  border-bottom: 1px solid #AAA;
}

って書いてみてもダメだった。で、Google先生に聞いたらこう書けばいいと分かった。

(CSS)
section article:last-of-type {
  border-bottom: 1px solid #AAA;
}

なるほど、:last-of-typeか。覚えました。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のPG・SEを経て、独立。 現在はとある企業のCTOと、変な名前の会社の社長をしてる。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください