・要素が6個あるうち、3個だけ表示したい…
・パソコンの画面幅では6個だけど、スマホの時は4個までにしたい…
などなど、様々な条件下で表示したい個数が異なる場合に使えるタグを紹介します。
上記をコーディングしようとする際に、簡単な方法が２パターンあります。
目次
1. HTMLにCSSクラスをつけて調整する
<div class="container1">
<a href="#">要素１</a>
<a href="#">要素２</a>
<a href="#">要素３</a>
<a href="#" class="none">要素４</a>
<a href="#" class="none">要素５</a>
<a href="#" class="none">要素６</a>
</div>.container1 a {
display: inline-block;
background-color: #aaa;
color: #fff;
margin: 10px;
padding: 10px;
}
.container1 a.none {
display: none;
}HTMLにクラス名をつけることで、該当の要素を非表示にできます。
しかし要素がたくさんあるとその分クラスをつける手間が増えます。
後から変更があった場合でも修正が面倒です。
埋め込みや何かの連携によって要素を表示している場合、HTMLに手を加えられないケースもあるかと思います。
2. CSSのnth-childで調整する
<div class="container2">
<a href="#">要素１</a>
<a href="#">要素２</a>
<a href="#">要素３</a>
<a href="#">要素４</a>
<a href="#">要素５</a>
<a href="#">要素６</a>
</div>.container2 a {
display: inline-block;
background-color: #f4902f;
color: #fff;
margin: 10px;
padding: 10px;
}
.container2 a:nth-child(n + 4) {
display: none;
}こちらのコードだと、最初の方法と同様に4個目以上のリンクは非表示になります。
しかもHTMLには何も手を加えなくて良いので、ソースがすっきりして管理しやすいです。
後から表示したい個数が変更になっても、nth-child(n + 4)の箇所を変更するだけでOKです。
nth-child( )
nth-child( ) というタグはCSSの擬似クラスで、複数ある要素のうちn番目を指定することが可能です。
nth-child(2) なら 2番目だけ、
nth-child(4n) なら ３つおきに要素を選択できます。
nth-child(n + X) の応用
<div class="container3">
<a href="#">要素１</a>
<a href="#">要素２</a>
<a href="#">要素３</a>
<a href="#">要素４</a>
<a href="#">要素５</a>
<a href="#">要素６</a>
</div>.container3 a {
display: inline-block;
background-color: #f4902f;
color: #fff;
margin: 10px;
padding: 10px;
}
.container3 a:nth-child(n + 5) {
background-color: #4ec7d0;
}５番目以降の要素の背景色を変更しました。
フォントサイズを変えたり、カスタマイズを色々加えてもいいですね。
まとめ
CSSのnth-childを使えばHTMLを書き換えなくて良いため、簡単でスピーディなコーディングが可能になります。
nth-of-typeやfirst-of-type（last-of-type）はよく使っているのですが、nth-childはあまり使用頻度が高くありませんでした。場面の使い分けも含め、これから活用していきます。