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

CSS(シー・エス・エス)

2021.03.30

この記事は約5分で読めます。

並んでいるブロックの最初だけ小さくしたい
:first-child
パターン２(子)
パターン３(子孫)
使い方に注意
まとめ

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

例えば、ワードプレスなどで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;
}

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

パターン２(子)

<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;
}

パターン３(子孫)

<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;
}