`, который непосредственно следует за элементом `

`. * **Селектор общих элементов (General Sibling Selector):** ```css h2 ~ p { color: red; } ``` Выбирает все элементы `

`, которые являются общими братьями и сестрами элемента `

` (то есть находятся на одном уровне и следуют после `

`). * **Псевдоклассы (Pseudo-classes):** * `:hover`: Стиль применяется при наведении курсора мыши на элемент. ```css a:hover { color: red; } ``` * `:active`: Стиль применяется, когда элемент активирован (например, нажата кнопка). ```css button:active { background-color: #ccc; } ``` * `:focus`: Стиль применяется, когда элемент в фокусе (например, текстовое поле). ```css input:focus { border: 2px solid blue; } ``` * `:visited`: Стиль для посещенных ссылок. ```css a:visited { color: purple; } ``` * `:nth-child(n)`: Выбирает элемент, который является n-м потомком своего родителя ```css li:nth-child(odd) { background-color: #f2f2f2; } li:nth-child(even) { background-color: #ffffff; } ``` * **Псевдоэлементы (Pseudo-elements):** * `::before`: Вставляет контент *перед* элементом. ```css p::before { content: "Читать далее: "; } ``` * `::after`: Вставляет контент *после* элемента. ```css h1::after { content: " - Новый заголовок"; } ``` * `::first-line`: Стилизует первую строку элемента. ```css p::first-line { font-weight: bold; } ``` * `::first-letter`: Стилизует первую букву элемента ```css p::first-letter { font-size: 200%; color: red; } ``` #### Комбинирование селекторов Селекторы можно комбинировать для создания более сложных правил: ```css /* Элемент

с классом "highlight" внутри элемента

с ID "content" */ #content div p.highlight { font-size: 16px; } ```

✨Dvurechensky✨