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. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  2. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

  3. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

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

    CSS

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

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

  5. Ember Burger Menu

    CSS

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

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

  6. CSS Only Fab Icon Menu

    CSS

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

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

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP