[CSS] 疑似クラス - only-child, only-of-type, empty, empty, root

Study / Javascript, Jquery, Css 作成日付 : 2019/12/05 07:29:15 修正日付 : 2019/12/05 07:29:41

こんにちは。明月です。

前述で疑似クラス nth-childとnth-of-type,first-child,fist-of-typeに関して説明しました。

link - [CSS] 疑似クラス - nth-child, nth-of-type, nth-last-child, nth-last-of-type

link - [CSS] 疑似クラス - first-child, last-child, first-of-type, last-of-type

今回の投稿ではonly-child, only-of-type, empty, empty, rootを調べると思いますが、あまり使わない選択子ですね。

それで例を確認しましょう。

<!DOCTYPE>
<html>
 <head>
    <style>
    .test{
      height:100px;
    }
    </style>
 </head>
 <body>
  <div class="test">
    <p>Testです。</p>
  </div>
  <br />
  <div class="test">
    <p>Hello worldです。</p>
    <br />
    <span>これはSPANです。</span>
    <br />
    <span>これはSPAN2です。</span>
  </div>
  <br />
  <div class="test">
    <span>これはSPAN3です。</span>
  </div>
  <div class="test"></div>
 </body>
</html>

そしてCSSで「only-child, only-of-type, empty, empty, root」を作成してまましょう。

.test p:only-child{
  color:red;
}
.test span:only-of-type{
  color:blue;
}
.test:empty{
  background-color:green;
}
:root{
  background-color:pink;
}

「only-child」の疑似クラスは「test」クラスの派生タグで「p」タグが一つだけあることを探します。

そしたら「p」タグを持っている「.test」クラスのエレメントは初めの「div」タグと２つ目の「div」タグですね。でも２つ目の「div」タグは「p」タグ以外に「span」タグも持っているので、「only-child」では初めの「dev > p」タグが文字が赤くなると思います。

次は「only-of-type」です。

「only-of-type」は「only-child」と似てますが、結果は全然違います。

「p:only-child」の場合は全ての派生タグで一つの「p」タグと意味です。

「span:only-of-type」の場合は全ての派生タグではなく「span」のバグが一つだけのタグですね。

「div.test」タグを見ると２つ目と３つ目が「div」タグで「span」タグを持っていますが、２つ目の場合は「span」タグが２つですね。

３番目の「div」タグだけ対象です。

「:empty」の場合は派生のタグがないタグを調べます。参考に「<タグ>テスト値</タグ>」の形式も派生データがあることで判断します。つまり、「:empty」に選択されません。

「:root」は「html」を選択することと同じ意味です。「html」や「body」選択することと「:root」で選択することと差異があるかな。