Home > :nth-child 擬似クラスサンプル

:nth-child 擬似クラスサンプル

  • Last Modified: 2008年11月 6日 12:47

:nth-child

div *:nth-child(even) と指定すると、親の div 要素内の子要素全てで兄弟関係の順番を数え、偶数の順番の時にスタイルを適用します。

p-001

p-002

p-003

p-004

p-005

div-001
div-002
div-003
div-004
div-005

p-006

p-007

p-008

p-009

p-010

XHTML

<div>
  <p>p-001</p>
  <p>p-002</p>
  <p>p-003</p>
  <p>p-004</p>
  <p>p-005</p>
  <div>div-001</div>
  <div>div-002</div>
  <div>div-003</div>
  <div>div-004</div>
  <div>div-005</div>
  <p>p-006</p>
  <p>p-007</p>
  <p>p-008</p>
  <p>p-009</p>
  <p>p-010</p>
</div>

CSS

div p:nth-child(even) {
  background-color: #fcc;
}

div div:nth-child(even) {
  background-color: #ffc;
}

div *:nth-child(even)::after {
  margin-left: 2em;
  content: "この行は、親の div 要素内の子要素全体で順番を数えて、偶数の順番に位置しています。";
  color: #999;
  font-size: 75%;
}

Home > :nth-child 擬似クラスサンプル

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top