ГРУППА КУРСА
|
Главная >
Учебник CSS >
Сложные селекторыКроме тех селекторов, которые мы уже рассмотрели, есть и другие. В том числе, в CSS есть селекторы атрибутов, псевдоклассы, псевдоэлементы. Они более сложные. Но при создании реальных сайтов, без них не обойтись. Поэтому нужно их изучить и научиться ими пользоваться. Селекторы атрибутовВ CSS cелекторы атрибутов используются, когда нужно указать стиль элементам, имеющим определённый атрибут. Ко всем элементам на странице, у которых есть данный атрибут, будет применён стиль. Для указания такого селектора пишется нужный атрибут в квадратных скобках. Пример: Стиль: +
HTML код:
Существует возможность устнановить стиль по атрибуту не для всех элементов страницы а только для какого-то конкретного селектора. Для этого пишется этот селектор, затем без пробела указывается атрибут. Пример: Стиль:
HTML код:
Можно установить стиль по атрибуту не только для тэгов, но и для других селекторов. Селекторы атрибутов можно указать с конкрентым значением атрибута. Пример: Стиль:
HTML код:
ПсевдоклассыПсевдоклассы позволяют установить элементу стиль в зависимости от его состояния. Например, можно указать разные стили посещённым ссылкам, непосещённым ссылкам и активным ссылкам. Хотя псевдоклассы в CSS чаще всего используются именно для ссылок, но есть псевдоклассы, которые можно применять к любым элементам. Далее приведён список псевдоклассов: link - непосещённая ссылка visited - посещённая ссылка active - активный элемент, то есть элемент, на котором нажата кнопка мыши. Элемент является активным, только пока кнопка нажата focus - элемент находится в фокусе. Используется для элементов формы hover - указатель мыши находится над элементом lang(язык) - элемент с атрибутом lang, имеющим значение, указанное в скобках first-of-type - первый элемент родительского элемента last-of-type - последний элемент родительского элемента only-of-type - единственный элемент родительского элемента nth-of-type(n) - элемент, который идёт n по счёту родительского элемента nth-last-of-type(n) - элемент, который идёт n по счёту родительского элемента, считая от последнего элемента root - корневой элемент документа empty - пустой элемент enabled - включенный элемент формы disabled - выключенный элемент формы checked - выбранный элемент формы not(селектор) - все элементы, кроме указанного Для исполльзования псевдоклассов пишется сначала селектор, затем без пробелов двоеточие и псевдокласс. Для примера создадим блок и установим для него изменение стиля при наведении указателя мыши: Стиль:
HTML код:
Псевдоклассы часто используются, чтобы выделить какой-то объект, занимающий особенное место на странице. ПсевдоэлементыПсевдоэлементы позволяют выбрать не всё содержание элемента, а только его часть и указать этой части отдельный стиль. first-letter - первый символ элемента first-line - первая строка элемента Этим псевдоэлементам можно указать свойства, применяемые к тексту Для указания псевдоэлемента сначала пишется селектор, затем без пробелов два двоеточия и псевдоэлемент. Пример: Стиль:
HTML код:
Существует ещё два псевдоэлемента, которые работают совсем по-другому. Они добавляют контент элементу. before - добавляет контент перед основным контентом after - добавляет контент после основного контента
Этим псевдоэлементам указывается свойство content, в котором пишется добавляемый контент. При необходимости можно указать и другие свойства. Пример: Стиль:
HTML код:
КомбинаторыКомбинаторы - это знаки, которые разделяют простые селекторы внутри составного селектора. Напомню, что в составном селекторе первый селектор указывает родительский элемент, а второй селектор указывает дочерний элемент. При использовании комбинатора смысл составного селектора может изменяться. Комбинаторы перечислены в следующей таблице:
По сути, пробел тоже является комбинатором, который устанавливает обычные правила работы составного селектора Для примера решим задачу, которая иногда решается на практике. Есть блок, внутри него есть тэги <span>. Для тех тэгов <span>, которые непосредственно вложены в блок, нужно установить определённый стиль. Но в блоке есть и другие теги <span>. Только они находятся внутри других вложенных тэгов. И такие тэги <span> должны остаться неизменными. Задача лекго решается с помощю комбинатора >. Стиль:
HTML код:
Добавьте на страницу какие-нибудь элементы и попробуйте применить к ним стиль с иcпользованием других комбинаторов. |