Всем привет. Сегодня поговорим про 2 новых псевдокласса CSS3 - only-child и only-of-type .
Всем привет. Сегодня поговорим про 2 новых псевдокласса CSS3 - only-child и only-of-type.
Only Child
Псевдокласс only-child применяется к тем элементам, которые единственные у своих родителей.
Например, у нас есть список, где только один li.
<ul>
<li>Test</li>
</ul>
Зададим такой стиль:
ul li:only-child {
color: blue;
}
Он сработает. Однако, стоит нам добавить еще один li...
<ul>
<li>Test</li>
<li>Test</li>
</ul>
... и уже ничего не работает.
Only of Type
Псевдокласс only-of-type применяется к элементам указанного типа, если они у родителя одни.
Например:
img:only-of-type {
border: 3px dashed green;
}
HTML
<p>
<img src="#" alt="">
<img src="#" alt="">
</p>
<p>
<img src="#" alt="">
</p>
Это стиль применится к третьему изображению, т.к. он один у родителя.
Итак, на этом все. Сегодня разобрали два новых псевдокласса CSS3 - only-child и only-of-type.
