【初心者でもわかる】最初と最後以外にCSSを指定する方法（1行でも書ける）

どうも7noteです。最初と最後を除くCSSの書き方

最初と最後を判定してCSSを当てる範囲を決める方法。
1行で書く方法もあります。

いろいろな書き方

最初と最後以外を赤文字にします。

index.html

<p>1番目</p>
<p>2番目</p>
<p>3番目</p>
<p>4番目</p>

style.css

p {
  color: red;
}

p:first-of-type,
p:last-of-type {
  color: #000; /* デフォルトの色を指定 */
}

/* もしくは */

p:not(:first-of-type):not(:last-of-type) {
  color: red;
}

または最初と最後にだけクラスがついているならこんな書き方もできます。

index.html

<p class="first">1番目</p>
<p>2番目</p>
<p>3番目</p>
<p class="last">ラスト</p>

style.css

p:not([class]) {
  color: red;  
} 

クラスをもっていない要素のみ赤文字にするという指定方法になります。

※-childか-of-typeは製作の環境に応じて適している方を使ってください。
-childと-of-typeの違いについて

まとめ

最初と最後以外、は専用の書き方があるわけではなく、シンプルに「最初と最後以外」と2つの指定を組み合わせて書きます。

個人的なおすすめの書き方は1行で書けるxxx:not(:first-of-type):not(:last-of-type)ですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ