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()のまとめ

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

新しめのWordPressテーマ30前のページ

とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」次のページ

関連記事

  1. Media Queriesの@media
  2. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

  3. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  4. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

  5. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  6. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

コメント

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

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

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP