CSS / 擬似クラス / only-child

対象がその親要素内で1個しか無いという状態を表す。色々条件があって1個ではなくて単純に1個の状態を表す。親要素を指定するものではない。

このようなものがあった場合。

<p>
    <a>aaa</a>
    <b>bbb</b>
</p>

このようなスタイルを当てる

p b:only-child{
    color: red;
}

確かに、bだけに限定すれば p 中で1個しか無いのだがこれは選択されない。

これは、このような場合に2番目の p の中の b をセレクトしたい場合に使う。

<p>
    <b>aaa</b>
    <b>aaa</b>
</p>
<p>
    <b>bbb</b>
</p>
<p>
    <a>bbb</a>
</p>

css/pseudo_class/only-child.txt · 最終更新: 2021-03-11 11:09 by ore

文書の先頭へ