Основы CSS. Псевдоклассы CSS.

Псевдоклассы CSS — это ключевые слова, которые добавляются к селекторам и используются для определения состояния элемента, которое не может быть описано только при помощи его текущего состояния в документе.

Вот несколько часто используемых псевдоклассов:

1. :hover — применяется к элементу при наведении на него курсора мыши.

a:hover {
    color: red;
}

2. :active — применяется к элементу в момент его активации (нажатие левой кнопки мыши).

button:active {
    background-color: gray;
}

3. :focus - применяется к элементу, когда он получает фокус ввода.
input:focus {
    border-color: blue;
}

4. :visited - применяется к ссылке, которая была посещена пользователем.

a:visited {
    color: purple;
}
5. :nth-child() - позволяет выбрать элементы по их порядковому номеру внутри родительского элемента.

li:nth-child(odd) {
    background-color: lightgray;
}

6. :nth-of-type() - аналогичен :nth-child(), но применяется только к элементам определенного типа.

p:nth-of-type(3n) {
    font-weight: bold;
}
7. :first-child - применяется к элементу, если он является первым дочерним элементом своего родителя.

li:first-child {
    font-weight: bold;
}
8. :last-child - применяется к элементу, если он является последним дочерним элементом своего родителя.

div:last-child {
    margin-bottom: 0;
}

9. :nth-last-child() - аналогичен :nth-child(), но считает элементы с конца.

p:nth-last-child(2) {
    color: green;
}

В CSS существует еще много других псевдоклассов, которые можно использовать для различных целей. Данные псевдокласы являются основными и используются в большенстве сайтов. Попробывать псевдоклассы можно здесь