tolerant
7 лет назадЗаписки HTML-верстальщика: псевдоклассы CSS
Привет всем!
В своей предыдущей статье я рассказывал о всех разновидностях селекторов CSS и как их можно эффективно использовать.
В этой статье, как я и обещал, я подскажу очень популярные и не очень популярные псевдоклассы в CSS. Даже опытные разработчики сайтов, я уверен, некоторые из них не то, чтобы не использовали в своей работе, но и не знали о них вовсе!
Итак, начнём:
- :focus, :hover, :active,:link, :visited - псевдоклассы, с помощью которых мы можем стилизовать ссылки, кнопки и другие элементы при возникновении определенного события (получение фокуса, наведение мышью, клик, не посещенная ссылка, уже посещенная ссылка).
- :checked - используется для элементов форм, таких как <input type="radio">, <input type="checkbox">, option внутри select. Стили для этого псевдокласса срабатывают только если этот элемент выбран или включён.
- :valid, :invalid - стилизует все элементы формы, контент в которых правильно/неправильно заполнен в соответствии с типом элемента. К примеру, для <input type="email" value="" /> значение value должно соответствовать формату Email. Если это так - сработают свойства input[type="email"]:valid, иначе input[type="email"]:invalid.
- :required, :optional - стилизует элемент формы, который обязателен/не обязателен к заполнению.
- :empty - стили применятся, если внутри элемента нет ни одного символа..даже пробела.
- :read-only, :read-write - стилизует элемент формы, который доступен только к чтению/чтению-записи.
- :in-range, :out-of-range - стилизует все элементы, которые находятся в/вне заданного диапазона. К примеру, для <input type="number" min="1" max="5" value="10" /> сработают свойства input[type="number"]:out-of-range.
- :enabled, :disabled - стилизует элемент, который в данный момент включён (активен, на него можно кликнуть, написать какой-то текст, выбрать) или выключен.
- :first-child,:last-child - стилизует первый/последний элемент внутри какого-либо родительского блока.
- :first-of-type,:last-of-type - отличие от предыдущего псевдокласса в том, что здесь будет стилизован конкретный элемент. К примеру, если внутри дива сначала идет <span></span>, а потом <p></p>, то p:first-child не сработает, а p:first-of-type сработает как нужно.
- :nth-child(n), :nth-last-child(n) - стилизует n-й порядковый элемент внутри какого-либо родительского блока, начиная с начала или с конца.
- :nth-of-type(n), :nth-last-of-type(n) - стилизует конкретный n-й порядковый элемент внутри какого-либо родительского блока, начиная с начала или с конца.
- :only-child, :only-of-type - класс сработает, если у нас внутри какого-либо элемента существует лишь один элемент. Отличие свойств только в том, что :only-of-type выделяет один конкретный элемент.
- :not() - класс сработает для элементов, у которых нет заданного параметра. Поясню, к примеру, псевдокласс :not(.red) сработает для всех элементов, у которых нет класса .red.
- :target - стилизует элемент, ID которого указывается в URL-строке при помощи якоря. К примеру, если у Вас в адресной строке будет ссылка вида: www.site.com#section, свойства класса :target сработают для элемента с id=section.
- :lang() - свойства сработают для того элемента, которому внутри тега указан одинаковый параметр lang. К примеру, если у нас есть <div lang="en"></div> - для него сработает класс :lang(en)
- :root - свойства класса применятся к самому первому элементу в вашем документе. Практически всегда это элемент <html>.
Следующие свойства имеют не полную поддержку браузерами!
- :dir(ltr), :dir(rtl) - стили применятся к элементу в соответствии со специальным параметром внутри тега. К примеру, для <div dir="ltr"></div> сработают свойства div:dir(ltr). (Работает только в Firefox).
- :default - стиль применится для элемента, который имеет стандартные стили (Не поддерживается IE).
- :indeterminate - специальный класс для работы с JS. C его помощью можно стилизовать: а) <input type="checkbox">, которому при помощи JS задан indeterminate параметр, равный true. б) <input type="radio">, при условии, что вся группа радио-инпутов не чекнута. в) Элемент <progress> в состоянии indeterminate.
- :scope - к примеру, у нас есть следующий кусок кода:
<div>
<style scoped>
:scope {color:green;}
</style>
<p>Цвет будет зеленый</p>
<span></span>
</div>
<p>Цвет будет стандартный</p>Стили сработают только в определенной зоне видимости...там, где они будут определены. (Не поддерживается IE).
- :fullscreen - свойство сработает тогда, когда Вы откроете Ваш браузер в режиме fullscreen. (Очень слабая поддержка браузерами).
- :first, :left, :right - стили для страницы печати. Стилизована будет первая/левая/правая страница, которая отправляется на печать.
На этом всё, друзья. Спасибо, что читаете меня. Надеюсь, кому-то стал полезен. В своей следующей статье я хотел бы подробней остановиться на псевдоклассах, связанных с порядковыми номерами элементов nth-child и показать их нестандартное практическое применение.