今回はn番目、n番目以降。
〇〇からみて最初の要素、〇〇からみて最後の要素。
他にも奇数や偶数などもご紹介していきます。
今回の基本のHTML
<ul class="example">
<li>最初の要素「ネズミ」</li>
<li>2番目の要素「りす」</li>
<li>3番目の要素「うさぎ」</li>
<li>4番目の要素「ねこ」</li>
<li>5番目の要素「わんこ」</li>
<li>最後の要素「カメ」</li>
</ul>今回は分かりやすく ul >li の構造にしていますが、
親はdivでもtableでもなんでもいいです。
とにかく「親」と「子」がいれば良いのです。
n番目
- 最初の要素「ネズミ」
- 2番目の要素「りす」
- 3番目の要素「うさぎ」
- 4番目の要素「ねこ」
- 5番目の要素「わんこ」
- 最後の要素「カメ」
.example li:nth-child(3) {
color:pink;
}指定要素から見て3番目子要素 という意味ですね。
これは簡単です。
数えるのが面倒ですが、20番目とか都度変更が可能です。
〇〇のn番目まで
- 最初の要素「ネズミ」
- 2番目の要素「りす」
- 3番目の要素「うさぎ」
- 4番目の要素「ねこ」
- 5番目の要素「わんこ」
- 最後の要素「カメ」
.example li:nth-child(-n+3) {
color:pink;
}「-n」がややこしいですが、子要素の最初の要素から何番目まで指定できます。
n番目〜（以降）
- 最初の要素「ネズミ」
- 2番目の要素「りす」
- 3番目の要素「うさぎ」
- 4番目の要素「ねこ」
- 5番目の要素「わんこ」
- 最後の要素「カメ」
.example li:nth-child(n+3) {
color:pink;
}指定した要素の３番目以降の全ての子要素。
以降の全て になりますので、さらにその下も全てに効きます。
こんな感じです。
- 最初の要素「ネズミ」
- 2番目の要素「りす」
-
3番目の要素「うさぎ」
- 3番目の子要素「子うさぎ1」
- 3番目の子要素「子うさぎ2」
- 3番目の子要素「子うさぎ3」
- 4番目の要素「ねこ」
- 4番目の子要素「ねこ1」
- 4番目の子要素「ねこ2」
- 4番目の子要素「ねこ3」
- 5番目の要素「わんこ」
- 最後の要素「カメ」
最初の要素
- 最初の要素「ネズミ」
- 2番目の要素「りす」
- 3番目の要素「うさぎ」
- 4番目の要素「ねこ」
- 5番目の要素「わんこ」
- 最後の要素「カメ」
.example4 li:first-child {
color:pink;
}指定した要素の最初の要素。
【応用】最初から○番目
もちろん先ほどの応用で最初から３番目。
例
- 最初の要素「ネズミ」
- 2番目の要素「りす」
- 3番目の要素「うさぎ」
- 4番目の要素「ねこ」
- 5番目の要素「わんこ」
- 最後の要素「カメ」
.example li:first-child(3) {
color:pink;
}なども指定できます。（-n）がない分かりやすいですね！
最後の要素
- 最初の要素「ネズミ」
- 2番目の要素「りす」
- 3番目の要素「うさぎ」
- 4番目の要素「ねこ」
- 5番目の要素「わんこ」
- 最後の要素「カメ」
.example li:last-child {
color:pink;
}指定した要素の最後の要素
【応用】最後から○番目全て
例
- 最初の要素「ネズミ」
- 2番目の要素「りす」
- 3番目の要素「うさぎ」
- 4番目の要素「ねこ」
- 5番目の要素「わんこ」
- 最後の要素「カメ」
.example li:last-child(n+3){
text-decoration: underline;
}応用は例です。
沢山応用しようと思えばできますので、いろいろ試してみると楽しくなっちゃうかもです。
偶数・奇数
- 最初の要素「ネズミ」
- 2番目の要素「りす」
- 3番目の要素「うさぎ」
- 4番目の要素「ねこ」
- 5番目の要素「とら」
- 6番目の要素「らいおん」
- 7番目の要素「きりん」
- 8番目の要素「ぞう」
- 9番目の要素「おかぴ」
- 10番目の要素「わんこ」
- 最後の要素「カメ」
.example li:nth-child(odd){
color:pink;
}
.example li:nth-child(even){
color:red;
}偶数がeven 奇数がodd となります。
要素の○倍
個人的にはあまり使わないですが、
一つは2倍、方や３倍で、デザインを変えたりするとランダムで可愛くなりそうですね！
- 最初の要素「ネズミ」
- 2番目の要素「りす」
- 3番目の要素「うさぎ」
- 4番目の要素「ねこ」
- 5番目の要素「とら」
- 6番目の要素「らいおん」
- 7番目の要素「きりん」
- 8番目の要素「ぞう」
- 9番目の要素「おかぴ」
- 10番目の要素「わんこ」
- 最後の要素「カメ」
.example li:nth-child(3n){
color:pink;
}child と type
nth-child と nth-of-typeに違いはあるのか・・
比べてみます。
先程のul>liだと分かりにくいので、divの構造に変更します。
使用したHTML
<div class="example">
<p>最初の要素「ネズミ」</p>
<p>2番目の要素「りす」</p>
<div>
<p>- 3番目の要素1「うさぎpちゃん」</p>
<strong>- 3番目の要素2「うさぎツヨちゃん」</strong>
<p>- 3番目の要素3「うさぎp2ちゃん」</p>
<p>- 3番目の要素4「うさぎp3ちゃん」</p>
</div>
<div>4番目の要素「ねこ」</div>
<p>5番目の要素「わんこ」</p>
<p>最後の要素「カメ」</p>
</div>child
最初の要素「ネズミp」
2番目の要素「りすp」
– 3番目の要素1「うさぎpちゃん」
– 3番目の要素2「うさぎツヨちゃん」– 3番目の要素3「うさぎp2ちゃん」
– 3番目の要素4「うさぎp3ちゃん」
5番目の要素「わんこp」
最後の要素「カメp」
/* 2番目 */
.example p:nth-child(2) {
border: solid;
}
/* 4番目 */
.example p:nth-child(4) {
font-weight: bold;
}
/* 3番目以降 */
.example p:nth-child(n+3) {
text-decoration: line-through;
}
/* 最後から2番目 */
.example p:nth-last-child(2) {
color:palevioletred;
}
/* 3の倍数 */
.example p:nth-child(3n){
background-color:aliceblue;
}今までご紹介した指定は、全てchildですよね。
こちらは、全ての要素の数 を単純に数えます。
child（子供）なので分かりやすいですね。
ここで、注意するのが、
子供なだけに・・全ての数を数えはしますが、そこに指定のpタグがないとスルーします。
結構よく「あれ？効かないよ」と言われて勘違いしてる人も多いようです。
はい。なので、いろんなタグが混ざってるけどそこには指定タグ(ここではp)があるんじゃ〜って時に使ってください。
type
最初の要素「ネズミp」
2番目の要素「りすp」
– 3番目の要素1「うさぎpちゃん」
– 3番目の要素2「うさぎツヨちゃん」– 3番目の要素3「うさぎp2ちゃん」
– 3番目の要素4「うさぎp3ちゃん」
5番目の要素「わんこp」
最後の要素「カメp」
/* 2番目 */
.example p:nth-of-type(2) {
border: solid;
}
/* 4番目 */
.example p:nth-of-type(4) {
font-weight: bold;
}
/* 3番目以降 */
.example p:nth-of-type(n+3) {
text-decoration: line-through;
}
/* 最後から2番目 */
.example p:nth-last-of-type(2) {
color:palevioletred;
}
/* 3の倍数 */
.example p:nth-of-type(3n){
background-color:aliceblue;
}こちらは今回初めてみた指定かと思います。
個人的にはよくchildよりnth-of-type の方がよく使います。
なぜなら、指定した要素の数 で数えてくれるからです。
そう・・マークアップで追加が入っても、ブレない。この指定が好きです。笑
まとめ
いかがでしたでしょうか？
2番目以降などは、リストの区切り線にも使えますので、
使いやすい指定をいくつか覚えるといいですね！
次回は「擬似要素」なんかをやっていけたらいいなと思います！
お楽しみに〜！
コメント