: only-çocuk - CSS Hileleri | CSS Almanak 2025

:only-childCSS'deki sözde sınıf seçici özellik üst öğe başka hiçbir öğesi alt olduğu üst elemanı ve sahip bir öğe temsil eder. Bu, :first-child:last-childveya :nth-child(1):nth-last-child(1)ile aynı olacaktır , ancak daha düşük bir özgüllükle.

div p:only-child ( color: red; )

Örneğin, benzer şekilde paragrafları iç içe geçirirsek ...


This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent

Şimdi sadece stil verebiliriz

ilk çocuğumuzun . Üst kapsayıcı birden fazla alt öğe içerdiğinden (yani p etiketleri) sonraki ve alt öğelerine asla stil uygulanmayacaktır.

p:only-child ( color:red; )

Ayrıca, bu örnekte olduğu gibi, iç içe geçmiş div içindeki ilk paragrafı ve tek alt öğesini seçen ek sözde sınıfları karıştırabiliriz div.contain.


Hello World
some more children

div.contain div:only-child :first-child ( color: red; )

:only-childana öğeniz aynı etikete sahip birden fazla alt öğe içeriyorsa seçici olarak çalışmaz. Örneğin…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

div.contain div:only-child ( color: red; )

Üst öğe 1'den fazla alt öğe içerdiğinden (adsız 3 div) bu, kırmızı rengi devralan div'lerin olmamasıyla sonuçlanır.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.