Псевдокласс :not в CSS3.
Всем привет. Сегодня я расскажу про псевдокласс not(), появившийся в CSS3.
Псевдокласс not, как понятно из его названия, все отрицает. Давайте рассмотрим на примере.
<p class="test">Какой-то текст</p>
<p class="block">Еще один текст</p>
Итак, у нас есть параграф с классом test и с классом block. Чтобы применить стиль, например, ко всем параграфам, которые не имеют класса test, нужно прописать следующее:
p:not(.test) {
color: blue;
}
Теперь параграф с классом block будет синим цветом, а параграф с классом test - нет. Отрицать можно не только классы, но и все другое. Например, атрибуты.
<input type="text" readonly>
<input type="text">
У нас есть текстовый элемент формы, у которого имеется атрибут readonly, и есть другой текстовый элемент формы, у которого этого атрибута нет. Мы решили применить стиль ко всем элементам формы, у которых нет данного атрибута. Для этого пропишем следующее:
input:not([readonly]) {
border: 1px solid green;
}
Вот такое простое, но полезное свойство. Надеюсь, кому-нибудь пригодится. Спасибо за внимание и до следующей статьи!
-
Создано 22.06.2014 21:28:36
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.