[CSS] 疑似クラス - only-child, only-of-type, empty, empty, root
こんにちは。明月です。前述で疑似クラス nth-childとnth-of-type,first-child,fist-of-typeに関して説明しました。link - [css] 疑似クラス - nth-child, nth-of-type, nth-last-child, nth-last-of-typelink - [css] 疑似クラス - first-child, last-child, first-of-type, last-of-type今回の投稿ではonly-child, only-of-type, empty, empty, rootを調べると思いますが、あまり使わない選択子ですね。それで例を確認しましょう。そしてcssで「only-child, only-of-type, empty, empty, root」を作成してまましょう。「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」で選択することと差異があるかな。