: једино дете - ЦСС-трикови

:only-childСелектор Псеудо-класа имовине у ЦСС-у представља елемент који има родитеља елемент и чији надређени елемент нема друге деце елемената. Ово би било исто као :first-child:last-childили :nth-child(1):nth-last-child(1), али са нижом специфичношћу.

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

На пример, ако одломке угнездимо унутар сличног…


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

Сада можемо обликовати једино

нашег првог детета . Следећа и његова деца никада неће бити стилизована јер родитељски контејнер садржи више од једног детета (тј. П ознаке).

p:only-child ( color:red; )

Такође бисмо могли да комбинујемо додатне псеудо-класе попут овог примера који бира први пасус унутар нашег угнежђеног див-а и једино дете подређеног div.contain.


Hello World
some more children

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

:only-childнеће радити као селектор ако ваш родитељски елемент садржи више од једног детета са идентичном ознаком. На пример…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

То неће резултирати тиме да див-ови наследе црвену боју јер родитељ садржи више од 1 подређеног (3 неименована див-а).

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.