nth-child()とnth-last-child()

CSS

CSSのnth-child()とnth-last-child()の使い方をまとめてみる

毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこうかと思います。CSSで例えばli要素の3番目以降や3の倍数に限りスタイルを指定したいといった時があるかと思います。そんな時はnth-child()やnth-last-child()を使うと簡単に特定の要素を指定することができます。ということで以下やり方をメモしときます。

[ads_center]

やり方

まずは以下のようなulでリスト化したHTMLに対して指定していきたいと思います。

<ul class="sample">
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
	<li>sample</li>
</ul>

偶数だけを指定する

ul.sample li:nth-child(odd) {
	color: red;
}

奇数だけを指定する

ul.sample li:nth-child(even) {
	color: blue;
}

3の倍数を指定する

ul.sample li:nth-child(3n) {
	border: 1px solid green;
}

先頭から5番目を指定する

ul.sample li:nth-child(5) {
	background: pink;
}

最後から5番目を指定する

ul.sample li:nth-last-child(5) {
	background: pink;
}

先頭から5つ指定する

ul.sample li:nth-child(-n+5) {
	font-size: 10px;
}

11番目以降指定する

ul.sample li:nth-child(n+11) {
	font-size: 20px;
}

最後から2つ指定する

ul.sample li:nth-last-child(-n+2) {
	background: #eee;
}

最後から14番目以前指定する

ul.sample li:nth-last-child(n+14) {
	background: #ccc;
}

まとめ

ということで、全部まとめるとこんな感じです。

ul.sample li:nth-child(odd) {
	color: red;
}

ul.sample li:nth-child(even) {
	color: blue;
}

ul.sample li:nth-child(3n) {
	border: 1px solid green;
}

ul.sample li:nth-child(5) {
	background: pink;
}

ul.sample li:nth-last-child(5) {
	background: pink;
}

ul.sample li:nth-child(-n+5) {
	font-size: 10px;
}

ul.sample li:nth-child(n+11) {
	font-size: 20px;
}

ul.sample li:nth-last-child(-n+2) {
	background: #eee;
}

ul.sample li:nth-last-child(n+14) {
	background: #ccc;
}

実際の画面で見てみるとこんな感じになります。

nth-child()とnth-last-child()のまとめ

次から忘れたらここで確認しに来ようかと思います。

関連記事

  1. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  2. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  3. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  4. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  5. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  6. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP