スキルアップを始める!

【CSS】:first-child|並んでいる最初のブロック要素だけのサイズを小さくしたりするCSS

CSS(シー・エス・エス)
CSS(シー・エス・エス)
この記事は約5分で読めます。

※記事中に広告情報を含みます。

スキルを手に入れた時、人は強くなれる。
Youtubeでスキルアップを始める 電子書籍でスキルアップを始める
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

並んでいるブロックの最初だけ小さくしたい

例えば、ワードプレスなどでCSSを設定してブロックを並べている時に、「最初の一番左のブロックだけを、幅を短くしたい」といった場合に使える方法です。

<div class="wrap">
 <span class="box">box1</span>
 <span class="box">box2</span>
 <span class="box">box3</span>
 <span class="box">box4</span>
 <span class="box">box5</span>
</div>
<div class="wrap">
 <span class="box">box1</span>
 <span class="box">box2</span>
 <span class="box">box3</span>
 <span class="box">box4</span>
 <span class="box">box5</span>
</div>

.wrap{
 display: flex;
}

.box{
 color:white;
 width:200px;
 height:200px;
 margin:10px;
 background-color:navy;
} 

:first-child

:first-child は CSS の擬似クラスで、兄弟要素のグループの中で最初の要素を表します。

https://developer.mozilla.org/ja/docs/Web/CSS/:first-child
/* 兄弟要素の中で最初の <p> を
   すべてを選択 */
p:first-child {
  color: lime;
}

:first-childを追加してみます。

<div class="wrap">
 <div class="box">box1</div>
 <div class="box">box2</div>
 <div class="box">box3</div>
 <div class="box">box4</div>
 <div class="box">box5</div>
</div>

<div class="wrap">
 <div class="box">box1</div>
 <div class="box">box2</div>
 <div class="box">box3</div>
 <div class="box">box4</div>
 <div class="box">box5</div>
</div>


.wrap{
 display: flex;
}

.box{
 color:white;
 width:200px;
 height:200px;
 margin:10px;
 background-color:navy;
}

.box:first-child{
width:100px;
}

最初の子要素だけが短くなりました!!

パターン2(子)

<div class="wrap">
 <div class="box">box1
  <div class="box">box1-child</div>
 </div>

 <div class="box">box2
  <div class="box">box2-child</div>
 </div>
 
 <div class="box">box3</div>
</div>

.box:first-child{
 width:100px;
 background-color:red;
}

パターン3(子孫)

<div class="wrap">
 <div class="box">box1
  <div class="box">box1-child
   <div class="box">box1-child-child</div>
  </div>
 </div>

 <div class="box">box2
  <div class="box">box2-child
   <div class="box">box2-child-child
    <div class="box">box2-child-child-child</div>
   </div>
  </div>
 </div>

 <div class="box">box3
  <div class="box">box3-child</div>
  <div class="box">box3-child</div>
 </div>

</div>

.box:first-child{
 width:100px;
 background-color:red;
}

使い方に注意

使い方に注意しないと、意図しない要素にCSSが掛かってしまう・・・可能性があります。

子孫要素の最初の要素にも:first-childが掛かっています。

まとめ

メンター
メンター

:first-childは多用されているクラス名などで使う時は注意が必要な気がします。必要があれば使ってみましょう。

メンティー
メンティー

分かりました!!!

ご参考ください😃

サンプルページ

https://css.eguweb.tech/p011/
URLをコピーしました!