Селектор последующих элементов

Селектор селектор1 ~ селектор2 применяет стили к элементу, подходящему под селектор2, только если перед ним расположен элемент, подходящий под селектор1. Оба элемента должны принадлежать одному родителю.

Между элементами селектор1 и селектор2 могут находиться другие элементы.

Псевдокласс :empty

Псевдокласс :empty, выбирает только те теги, у которых нет дочерних элементов (в том числе текстовых узлов).

Псевдокласс :only-child

Псевдокласс :only-child используется, когда нужно прописать индивидуальные стили для элемента, который является единственным дочерним элементом внутри родительского контейнера.

Псевдоклас :only-of-type

Псевдокласс :only-of-type используется, когда нужно прописать индивидуальные стили для элемента, который является единственным дочерним элементом указанного типа внутри родительского контейнера.

Псевдоэлементы ::before и ::after

Псевдоэлемент before позволяет с помощью CSS добавить псевдотег внутрь другого элемента и оформить его. Содержимое псевдотега задаётся с помощью свойства content.

Ведёт себя псевдотег так же, как обычный <span> с текстом. Ему можно задавать дополнительные стили.

Чтобы псевдоэлемент появился, ему необходимо задать свойство content. Достаточно даже пустой строки в значении свойства — content: "";.

Псевдоэлемент after аналогичен before. Отличие заключается в том, что он добавляет псевдотег не в начало, а в конец элемента.

Псевдоэлементы before и after можно использовать одновременно.

Псевдоэлементы ::first-line и ::first-letter

Псевдоэлемент first-line задает стиль первой строки форматированного текста. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

Пример использования:

p::first-line { }

Аналогично псевдоэлемент first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

Пример использования:

p::first-letter { }