CSSのlast-of-typeが分からない（後編）

いろいろ試してみてなんとなく動きがわかってきた。

前回の続きからちょっと試してみる。前編↓

前回のまとめ。

クラス指定の場合はクラス+要素のand指定になるのではないか。
子要素のみに適用される。
Macではbody要素を親とし、Winではbody要素を親としないのではないか。

last-of-type検証の事前準備
検証開始
まとめ

last-of-type検証の事前準備

今度は前回のHTMLから少し変更。boxを追加し、list2を作成。

<div class="container">
  <div class="box">
    <ul class="list">
      <li>アイテム１</li>
      <li>アイテム２</li>
      <li>アイテム<span>３</span></li>
    </ul>
  </div>
  <div class="box">
    <ul class="list">
      <li>アイテム１</li>
      <li><a href="">アイテム２</a></li>
      <li>アイテム３</li>
    </ul>
  </div>
  <div class="box">
    <ul class="list">
      <li><p>アイテム１</p></li>
      <li>アイテム２</li>
      <li>アイテム３</li>
    </ul>
  </div>
  <div class="box">
    <ul class="list">
      <li>アイテム１
        <div class="box w__auto">
          <ul class="list2">
            <li>アイテム１</li>
            <li>アイテム２</li>
            <li>アイテム３</li>
          </ul>
        </div>
      </li>
      <li>アイテム２</li>
      <li>アイテム３</li>
    </ul>
  </div>
</div>

CSS　全てのliが赤字になるように。（list2はlistのcolorを継承している。）

.box {
  border: 1px solid black;
  width: 300px;
  margin-bottom: 20px;
  background-color: aquamarine;
  padding: 20px;
}
.box.w__auto{
  width: auto;
}
.list {
  list-style: none;
  margin: 0;
  padding: 15px;
}
.list li {
  font-weight: bold;
  color:red;
}

一旦見た目こんな感じ。(ピンク文字と点線は画像加工で挿入)

検証開始

今回試したいのは、MDNに書かれているこちら↓

「単純セレクターが書かれていない場合は、ユニバーサルセレクター（*）が暗黙に含まれています。」

毎回思うんだけど、こんな一文で理解できると思ったら大間違いだよ？

ぽんきち

そうだにゃ！！

勉強中
ブログラマーさん

共感ありがとう笑

さて、やってみよう。

検証①

containerに指定を入れてみる。

.container :last-of-type{
 background-color: antiquewhite;
}

結果①

Windows Chrome

ちょっと？な結果になった。

Mac Chrome

div.container配下を指定してるから今回は変わらず。よしよし。

結果②

いろんな要素の背景が同化して分かりづらいので検証ツールで確認する。

ついてる。

ここもついてる。

ここも

なるほど、「単純セレクターが書かれていない場合は、ユニバーサルセレクター（*）が暗黙に含まれています。」の通り、

:last-of-typeの詳細までのセレクター指定がない場合、対象の全ての要素に当てはまる模様。

つまり

.container :last-of-type{
 background-color: antiquewhite;
}

は

.container *:last-of-type{
 background-color: antiquewhite;
}

と認識されているということ。

なので、div.container配下の全ての要素の中で、兄弟要素の最後に当たるもの全てにCSSが当たっている。

やっと意味が分かった。

セレクター指定がない場合は（*）が暗黙的に含まれる。

検証②

大体仕様が分かったので応用。「list2」の「アイテム３」にスタイルを当てたい時はどうするか。

てか実戦で使う時は大体そういう時だと思う。

多分これでいけるはず。

.list2 li:last-of-type{
  font-size:20px;
}

ビンゴ！

個別でCSSを当てたい場合はユニークのセレクターで指定する。（当たり前か）

検証③

あまりないが、引っ掛けパターン。HTMLの最後に同じクラスのsectionタグ追加する。

<div class="container">
  <div class="box">
    <ul class="list">
      <li>アイテム１</li>
      <li>アイテム２</li>
      <li>アイテム<span>３</span></li>
    </ul>
  </div>
  <div class="box">
    <ul class="list">
      <li>アイテム１</li>
      <li><a href="">アイテム２</a></li>
      <li>アイテム３</li>
    </ul>
  </div>
  <div class="box">
    <ul class="list">
      <li><p>アイテム１</p></li>
      <li>アイテム２</li>
      <li>アイテム３</li>
    </ul>
  </div>
  <div class="box">
    <ul class="list">
      <li>アイテム１
        <div class="box w__auto">
          <ul class="list2">
            <li>アイテム１</li>
            <li>アイテム２</li>
            <li>アイテム３</li>
          </ul>
        </div>
      </li>
      <li>アイテム２</li>
      <li>アイテム３</li>
    </ul>
  </div>

　<section class="box">
    <p>セクションテキスト</p>
  </section>

</div>

last-of-typeでセクションにCSSを当てようと思い以下のCSSを記述。

.box:last-of-type{
  background-color: pink;
}

するとこうなる。

.box:last-of-typeとした場合、クラスとその要素で指定となるため、div.box,section.boxどちらも対象になってしまう。

この構成の場合に無理にlast-of-typeで指定をする必要は無いと思いますが、似たような形でたまに引っ掛けられるので補足として記載しました。

まとめ

last-of-typeの動作について、自分なりの見解です。

クラス指定の場合、クラス名が設定されている要素全てが暗黙的に含まれ、クラスとのand指定になる。
子要素のみに適用される。
Macではbody要素を親要素とみなし、Winではbody要素を親要素とみなさない。
セレクター指定がない場合は（*）が暗黙的に含まれる。
個別箇所を狙って指定したい場合はセレクターがユニークになるようにする。

last-of-type完全に理解した。とたかを括っていると早速やらかすので大体分かった。と思う。

これでlast-of-typeに悩まされることは少なくなったはず。