: єдиношкіра дитина - 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, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.