: само-дете - CSS-трикове

В :only-childимота селектор псевдо-клас в CSS представлява елемент, който има главен елемент и чийто родител елемент няма други елементи деца. Това би било същото като :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).

p:only-child ( color:red; )

Можем също така да смесим допълнителни псевдокласове като този пример, който избира първия абзац в нашия вложен div и единственото дете на 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; )

Това ще доведе до липса на div, наследяващи червения цвят, тъй като родителят съдържа повече от 1 дете (3 неназовани div).

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.