Псевдоклассы и селекторы

В CSS3 также были добавлены новые механизмы определения ссылок и выбора элементов HTML.

Селекторы атрибутов. Теперь мы можем использовать и другие атрибуты, помимо id и class, для поиска элементов в документе и связывания с ними различных стилей. С помощью конструкции вида ключевое_слово[атрибут=значение] можно сослаться на элемент, имеющий определенный атрибут с определенным значением. Например, p[name="text"] создает ссылку на все элементы <p>, у которых есть атрибут с названием name и значением "text". В CSS3 также существуют техники для определения менее точных ссылок. Используя комбинации символов А=, $= и *=, мы можем находить элементы, начинающиеся или заканчивающиеся указанными значениями или включающие их в произвольном месте. Например, p[nameA="text"] находит все элементы <p>, у которых есть атрибут с названием name и значением, начинающимся на "text".

Псевдокласс :nth-child(). Находит определенного потомка в древовидной структуре. Например, с помощью стиля span:nth-child(2) можно сослаться на элемент <span>, у которого есть братья — другие элементы <span> — и который среди них расположен на позиции с номером 2. Это число считается индексом. Кроме того, вместо числа можно использовать такие ключевые слова, как odd и even, и ссылаться на все элементы с нечетным или четным индексом, например span:nth-child(odd).

Псевдокласс :first-child. Как и :nth-child(1), позволяет сослаться на первого потомка.

Псевдокласс :last-child. Позволяет сослаться на последнего потомка. Псевдокласс :only-child. Этот псевдокласс позволяет сослаться на элемент, являющийся единственным потомком своего родителя. Псевдокласс :not(). Используется для того, чтобы сослаться на все элементы, за исключением указанного в скобках.

Селектор >. Ссылается на второй элемент при условии, что первый элемент является его предком. Например, div > p позволяет выбрать только те элементы <p>, которые являются потомками элементов <div>. Селектор +. Ссылается на элементы, являющиеся братьями. Ссылка указывает на второй элемент при условии, что он расположен сразу за первым элементом. Например, span + p позволяет выбрать только те элементы <p>, которые следуют за элементами <span> и находятся с ними на одном уровне (то есть являются братьями).

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