未経験からエンジニア、そして採用担当のブログ|kakureblog

未経験からエンジニアになれた経験、エンジニア転職のヒントやプログラミングのTipsを届けます🤟

コーディング

【CSS】 first-child, nth-of-type,,,覚えておきたいセレクタをまとめました。<後編>

投稿日:2020年9月5日 更新日:

こんにちは。

今回はセレクタ解説の後編です。
後編はググったり参考書でリストで並んでいてみたら飛ばしたくなるやつらです。first-child, last-of-type, nth,,,,,などなど汗

自分も何度も「これは今度でいいっか」ってなりました。

しかし、今回6つに絞っています。
と言うのも、
今までLP、サイト含めて30案件ほどやりましたが、前編後編で紹介する計12のセレクタで問題なく実装できるからです。(※hover、before等を除く)

初心者はまずこの12個を使いこなせたらサイト制作でも困らないでしょう。

前編と後編を理解することで下記の3つが実現できます。

・CSSを短縮してい書ける様になりコーディングスピードが上がる。
・不要なクラス指定が無くなり読みやすいコードになる。
・変更や修正が発生した時の更新性が上がる。


前編は下のリンクからどうぞ。

<前編> 複数、子孫、子、隣接…覚えておきたいセレクタをまとめました。


今回解説するセレクターは6つです。

・:first-child
・:first-of-type
・:last-child
・:last-of-type
・:nth-child()
・:nth-of-type()

ではそれぞれについて解説していきます。

:first-child − 兄弟要素のグループの中で最初の要素を指定

<style>
 li:first-child{
  color: red;
 }
</style>
<body>
 <ul class="container">
    <li>1.このliは指定されました</li>
    <li>2.このliは指定されてません</li>
    <li>3.このliは指定されてません</li>
 </ul>
</body>

名前にchildとはあるのですが、子要素ではなく兄弟要素が指定されることに注意してください。
訳:「兄弟グループの<li>達の中で最初の<li>だけを指定します」
また最初の兄弟要素のタグがCSSで指定する要素と一致していないとなりません。
今回で言うと:first-childの前の「li」が「p」などになっているとどのリストにもCSSは適用されません。
そんな問題を解決してくれるのが次のセレクタです。

:first-of-type − 兄弟要素のグループの中でその種類の最初の要素を指定

<style>
 .container p:first-of-type{
  color: red;
 }
</style>
<body>
 <div class="container">
     <h1>H1です。</h1>
     <p>1.このliは指定されました</p>
     <p>2.このliは指定されてません</p>
     <p>3.このliは指定されてません</p>
  </div>
</body>

「 :first-of-type」は、兄弟要素のグループの中でその種類の最初の要素を指定してくれます。
訳:「兄弟グループの<p>達の中の最初<p>だけを指定します。h1は最初にある兄弟だけど<p>じゃないから無視!」


first-childとfirst-of-typeの違いは下記に詳細にまとめました。

<番外編>first-childとfirst-of-typeの違いは?lastもnthも同じ考え方

:last-child − 兄弟要素のグループの中で最後の要素を指定

<style>
 li:last-child{
  color: red;
 }
</style>
<body>
 <ul class="container">
     <li>1.このliは指定されてません</li>
     <li>2.このliは指定されてません</li>
     <li>3.このliは指定されました</li>
 </ul>
</body>

「 :first-child」の逆ですね。
訳:「兄弟グループの<li>達の中で最後の<li>だけを指定します」
また最初の兄弟要素のタグがCSSで指定する要素と一致していないとなりません。
今回で言うと:last-childの前の「li」が「p」などになっているとどのリストにもCSSは適用されません。
そんな問題を解決してくれるのが次のセレクタです。

:last-of-type − 兄弟要素のグループの中でその種類の最後の要素を指定

<style>
 .container p:last-of-type{
  color: red;
 }
</style>
<body>
 <div class="container">
     <p>1.このpは指定されてません</p>
     <p>2.このpは指定されてません</p>
     <p>3.このpは指定されました</p>
    <h3>H3です。</h1>
 </div>
</body>

「 :last-of-type」は、兄弟要素のグループの中でその種類の最後の要素を指定してくれます。
訳:「兄弟グループの<p>達の中で最後の<p>だけを指定します。h3は最後にある兄弟だけど<p>じゃないから無視!」

:nth-child() − 兄弟要素のグループの中での位置(順)を指定

<style>
 .container p:nth-child(3){
  color: red;
 }
</style>
<body>
 <div class="container">
     <p>1.このpは指定されてません</p>
     <p>2.このpは指定されてません</p>
     <p>3.このpは指定されました</p>
     <p>4.このpは指定されてません</p>
 </div>
</body>

「 :nth-child()」は、()内に数字を指定すると兄弟要素のグループの中で上から数えてその数字の位置にある要素が指定されます。
最初はfirst、最後はlast、それ以外の位置の指定はnthと覚えておきましょう。

訳:「兄弟グループの<p>達の中で上から3番目の<p>だけを指定します。」

また()内に「2n」や「3n」と入れると、
「2つおきに指定」「3つおきに指定」となります。↓↓

<style>
 .container p:nth-child(2n){
  color: red;
 }
</style>
<body>
 <div class="container">
     <p>1.このpは指定されてません</p>
     <p>2.このpは指定されました</p>
     <p>3.このpは指定されてません</p>
     <p>4.このpは指定されました</p>
 </div>
</body>


:nth-of-type() − 兄弟要素のグループの中で指定されたタグの位置(順)で指定

<style>
 .container p:nth-of-type(2){
  color: red;
 }
</style>
<body>
 <div class="container">
     <p>1.このpは指定されてません</p>
     <h2>H2です。</h2>
     <p>2.このpは指定されました</p>
     <p>3.このpは指定されてません</p>
     <p>4.このpは指定されてません</p>
 </div>
</body>

「:first-of-type」や「:last-of-type」と同様ですね。
指定タグの中での順番でCSSを当てています。
訳:「<p>タグの中で上から2番目にCSSを適応します。<h2>は2番目だけど<p>じゃないから無視。」


いかがでしたでしょうか??
前後編合わせて12個のセレクターを紹介しました。
後編のものは参考書で一覧で見るとかなり多くあるので避けてしまいがちです。
でも実際の実装ではこの12個が使えれば十分に対応できるでしょう。

12個だけです。
絶対覚えられます。

このシリーズが皆さんの役に立っていれば幸いです。
では!

<前編> 複数、子孫、子、隣接…覚えておきたいセレクタをまとめました。

-コーディング
-, , , , ,

執筆者:

関連記事

CSS

【CSS】hoverした時に別要素にアクションをさせる方法

今回はhoverした時に別の要素にアクションをつける方法を書きました。意外に躓くところなので、一読していただければと思います。脱初心者の為の内容となっています。

RubyとRailsとRuby on Railsの関係は?

Rubyなの?Railsなの?Ruby on Railsなの? それぞれバラバラなの?の様にまだ整理ができてない方は是非読んで見てください。

sass

SCSSの基礎

SCSSの基本をまとめてみました。CSSで書くよりかなりスピードアップしますし、記述場所も明確でわかりやすくなります。

CSS

【CSS】repeating-linear-gradient 背景に格子・ストライプを表現する

コンテンツ背景に格子状のデザインやストライプのデザインを背景に引く方法をお教えします。

CSS

【CSS】 複数、子孫、子、隣接…忘れがちなセレクタをまとめました。<前編>

「*」「+」「>」「,」これらについて書きます。セレクターを自由に使える様になると、コーディングスピード、可読性、更新性がアップします。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。