[CSS]擬似クラス:nth-childの便利な使い方をまとめたスタイルシート -Family.scss
Post on:2016年11月9日
sponsors
リストやセルなどの何個目を選択する時によく利用する擬似クラス:nth-childの便利な使い方26種類をSCSSでまとめられた「Family.scss」を紹介します。
:nth-childでアイテムが5個以上なら選択、5個以下なら選択とかもできるんですね。こんな使い方もできるんだ！ というものまであり、かなり便利です。
Family.scss
Family.scss -GitHub
Family.scssでは26種類のMixinに、:nth-childの便利な使い方がまとめられており、簡単に利用することができます。
- @include first(3)
- 最初の3個を選択。
- @include last(3)
- 最後の3個を選択。
- @include after-first(5)
- 最後から最初の5個を除いたものを選択。
CSSで記述すると下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*===================== first(3) =====================*/ ul li:nth-child(-n + 3) { background: red; color: #fff; } /*===================== last(3) =====================*/ ul li:nth-last-child(-n + 3) { background: red; color: #fff; } /*===================== after-first(5) =====================*/ ul li:nth-child(n+6) { background: red; color: #fff; } |
- @include from-end(3)
- 最後から数えて3個目を選択。
- @include between(3,6)
- 3個目から6個目までを選択。
- @include even-between(3,12)
- 3個目から12個目までの偶数個おきに選択。
CSSで記述すると下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*===================== from-end(3) =====================*/ ul li:nth-last-child(3) { background: red; color: #fff; } /*===================== between(3, 6) =====================*/ ul li:nth-child(n+3):nth-child(-n+6) { background: red; color: #fff; } /*===================== even-between(3, 12) =====================*/ ul li:nth-child(even):nth-child(n + 3):nth-child(-n + 12) { background: red; color: #fff; } |
- @include odd-between(3,13)
- 3個目から13個目までの奇数個おきに選択。
- @include n-between(3,3,13)
- 3個目から12個目までの3個おきに選択。
- @include all-but(3)
- 3個目を除いて、すべて選択。
CSSで記述すると下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*===================== odd-between(3, 13) =====================*/ ul li:nth-child(odd):nth-child(n + 3):nth-child(-n + 13) { background: red; color: #fff; } /*===================== n-between(3, 10, 20) =====================*/ ul li:nth-child(3n):nth-child(n + 10):nth-child(-n + 20) { background: red; color: #fff; } /*===================== all-but(3) =====================*/ ul li:not(:nth-child(3)) { background: red; color: #fff; } |
- @include each(3)
- 3個おきに選択。
- @include every(3)
- 3個おきに選択。
- @include from-first-last(2)
- 最初から2個目と最後から2個目を選択。
- @include middle(11)
- 11個中、真ん中を選択。
- @include all-but-first-last(2)
- 最初の2個と最後の2個を除いて、すべて選択。
CSSで記述すると下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/*===================== each(3) =====================*/ ul li:nth-child(3n) { background: red; color: #fff; } /*===================== every(3) =====================*/ ul li:nth-child(3n) { background: red; color: #fff; } /*===================== from-first-last(2) =====================*/ ul li:nth-child(2), ul li:nth-last-child(2) { background: red; color: #fff; } /*===================== middle(11) =====================*/ ul li:nth-child(6) { background: red; color: #fff; } /*===================== all-but-first-last(2) =====================*/ ul li:nth-child(n+2):nth-last-child(n+2) { background: red; color: #fff; } |
- @include first-of(10)
- 10個中の最初の1個目を選択。
- @include last-of(10)
- 10個中の最後の1個目を選択。
- @include at-least(5)
- 5個以上ならすべてを選択。
- @include at-most(5)
- 5個以下ならすべてを選択。
- @include in-between(5,10)
- 5個から10個の間ならすべてを選択。
CSSで記述すると下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/*===================== first-of(10) =====================*/ ul li:nth-last-child(10):first-child { background: red; color: #fff; } /*===================== last-of(10) =====================*/ ul li:nth-of-type(10):nth-last-of-type(1) { background: red; color: #fff; } /*===================== at-least(5) =====================*/ ul li:nth-last-child(n + 5), ul li:nth-last-child(n + 5) ~ li { background: red; color: #fff; } /*===================== at-most(5) =====================*/ ul li:nth-last-child(-n + 5):first-child, ul li:nth-last-child(-n + 5):first-child ~ li { background: red; color: #fff; } /*===================== in-between(5, 10) =====================*/ ul li:nth-last-child(n + 5):nth-last-child(-n + 10):first-child, ul li:nth-last-child(n + 5):nth-last-child(-n + 10):first-child ~ li { background: red; color: #fff; } |
- @include first-child()
- 最初の1個目を選択。
- @include last-child()
- 最後の1個目を選択。
- @include even()
- 偶数個おきに選択。
CSSで記述すると下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*===================== first-child() =====================*/ ul li:first-of-type { background: red; color: #fff; } /*===================== last-child() =====================*/ ul li:last-of-type { background: red; color: #fff; } /*===================== even() =====================*/ ul li:nth-child(even) { background: red; color: #fff; } |
- @include odd()
- 奇数個おきに選択。
- @include first-last()
- 最初の1個目と最後の1個目を選択。
- @include unique()
- 唯一の子要素であるときに選択。
- @include not unique()
- 唯一の子要素でないときに選択。
CSSで記述すると下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*===================== odd() =====================*/ ul li:nth-child(odd) { background: red; color: #fff; } /*===================== first-last() =====================*/ ul li:first-child, ul li:last-child { background: red; color: #fff; } /*===================== unique() =====================*/ ul li:only-child { background: red; color: #fff; } /*===================== not-unique() =====================*/ ul li:not(:only-child) { background: red; color: #fff; } |
sponsors
