Псевдоклассы 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.
-
Создано 23.06.2014 20:23:45
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.