:only-child
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨Ð¸ÑÐ»Ñ 2015 г.â©.
* Some parts of this feature may have varying levels of support.
ÐпиÑание
CSS пÑевдоклаÑÑ :only-child наÑ
Ð¾Ð´Ð¸Ñ Ð»Ñбой ÑлеменÑ, ÑвлÑÑÑийÑÑ ÐµÐ´Ð¸Ð½ÑÑвеннÑм поÑомком ÑодиÑелÑ. ÐÑо Ñоже, ÑÑо и :first-child:last-child или :nth-child(1):nth-last-child(1), но Ñ Ð¼ÐµÐ½ÑÑей ÑпеÑиÑиÑноÑÑÑÑ.
СинÑакÑиÑ
parent child:only-child {
property: value;
}
ÐÑимеÑÑ
ÐÑоÑÑой пÑимеÑ
css
span:only-child {
color: red;
}
html
<div>
<span>ÐÑÐ¾Ñ span единÑÑвеннÑй ÑебÑнок Ñвоего папÑ:(</span>
</div>
<div>
<span>ÐÑÐ¾Ñ span один из поÑомков ÑодиÑелÑ</span>
<span>ÐÑÐ¾Ñ span один из деÑей оÑÑа</span>
</div>
РезÑлÑÑаÑ
ÐÑÐ¸Ð¼ÐµÑ Ñо ÑпиÑком
css
li li {
list-style-type: disc;
}
li:only-child {
color: #6699ff;
font-style: italic;
list-style-type: square;
}
html
<ol>
<li>
ÐеÑвÑй
<ul>
<li>ÐÑо единÑÑвеннÑй ÑебÑнок</li>
</ul>
</li>
<li>
ÐÑоÑой
<ul>
<li>ÐÑÐ¾Ñ ÑпиÑок Ñ Ð´Ð²ÑÐ¼Ñ ÑлеменÑами</li>
<li>ÐÑÐ¾Ñ ÑпиÑок Ñ Ð´Ð²ÑÐ¼Ñ ÑлеменÑами</li>
</ul>
</li>
<li>
ТÑеÑий
<ul>
<li>ÐÑÐ¾Ñ ÑпиÑок Ñ ÑÑÐµÐ¼Ñ ÑлеменÑами</li>
<li>ÐÑÐ¾Ñ ÑпиÑок Ñ ÑÑÐµÐ¼Ñ ÑлеменÑами</li>
<li>ÐÑÐ¾Ñ ÑпиÑок Ñ ÑÑÐµÐ¼Ñ ÑлеменÑами</li>
</ul>
</li>
<ol></ol>
</ol>
РезÑлÑÑаÑ
СпеÑиÑикаÑии
| Specification |
|---|
| Selectors Level 4 # only-child-pseudo |