Как использовать псевдоклассы в CSS Псевдоклассы описывают различные состояния элементов. Например, какой цвет будет у активной ссылки или при наведении. Чем псевдокласс отличается от обычного класса? названия псевдоклассов нам не нужно самим придумывать, их надо просто знать. имя псевдокласса добавляется через двоеточие к селектору, тогда как название обычного класса указывается внутри тега HTML разметки. Псевдоклассы для ссылок :hover – при наведении курсора :link – не посещенная ссылка :active – состояние при нажатой ссылке :visited - посещенная ссылка Идея состоит в том, что для каждого состояния ссылки, задаются свои CSS стили. Например, изменим цвет ссылки при наведении курсора, на красный. a:hover { color: red; } Чаще всего верстальщики сталкиваются с псевдоклассами работающими с ссылками, потому и знают их лучше всех. Псевдоклассы для input Однако больше всего псевдоклассов используется для работы с элементами формы, особенно для input. :focus – меняет стиль для поля, получившего фокус (клик внутри поля). По умолчанию браузер делает обводку внутри инпута, попадающего в фокус. Мы отменяем дефолтную обводку и устанавливаем свои стили. input:focus { outline: none; border: 2px solid green; } :checked – применяется к checkbox и radio элементам формы, когда они находятся во включенном состоянии. :empty – представляет пустой элемент, например <span></span> span:empty { background: blue; width: 30px; height: 30px; display: block; } :invalid – применяется к полям формы, когда вводимые пользователем данные не подходят под заданный тип (невалидные данные). Например, в поле с типом данных tel, пользователь ввел имя и тогда это поле станет красным. <input type="tel" required> input:invalid { background: red; } :valid – если валидация была успешна, то цвет поля станет зеленым. input:valid { background: green; } Псевдокласс first-child :first-child – задает CSS стили первому дочернему элементу в группе элементов одного родителя. <ul> <li>child 1</li> <li>child 2</li> <li>child 3</li> <li>child 4</li> <li>child 5</li> </ul> li:first-child { background: grey; } У первого элемента списка появился серый фон. :last-child – задает CSS стили последнему дочернему элементу в группе элементов одного родителя. li:last-child { background: orange; } У последнего элемента списка появился оранжевый фон. Псевдокласс nth-child Для примера возьмем все тот же список. Как быть, если нужно выбрать не первый и не последний элемент списка, а например второй? Так вот, псевдокласс nth-child позволяет обращаться к элементу через порядковый номер, расположения в HTML-разметке или через выражение. Выбор через порядковый номер, начиная с 1-го. // второй элемент белый li:nth-child(2) { color: #fff; } // третий элемент черный li:nth-child(3) { color: #000; } Через ключевые слова: :even – выбирает все четные номера :odd – выбирает все нечетные номера .li:nth-child(even) { background: white; } li:nth-child(odd) { background: blue; } Через выражение: n – это счетчик, который может увеличивается от 0 до количества дочерних элементов. Выражение позволяет делать более сложную выборку элементов. :nth-child(3n) // каждый третий элемент (3, 6, 9) :nth-child(3n+4) // каждый третий элемент, начиная с четвертого (4, 7, 10) Специфичные псевдоклассы target: - применяется к id, который указан в адресной строке браузера. <div id="h1">Заголовок раздела</div> h1:target { color: red; font-weight: 500; } Комбинирование псевдоклассов Можно на один селектор навесить несколько псевдоклассов, при этом порядок не важен. Однако в одной комбинации нельзя использовать взаимоисключающие псевдоклассы. При наведении курсора на последний дочерний элемент списка, сделаем текст зеленым. li:last-child:hover{ color:green; } Не стоит изучать псевдоклассы просто по справочнику, в отрыве от реального макета. Только верстая макет, быстро придет понимание, где и какой использовать псевдокласс. Посмотрите, как верстают сайты профессионалы в этом видеокурсе.