Универсальный селектор

Если в селекторе правила CSS указан символ "*", то это правило применяется ко всем элементам страницы без исключения. Сложно представить себе случай, когда такое правило имеет смысл. Но есть один случай когда разработчик хочет "обнулить" все внешние и внутренние отступы. Тогда нужно использовать такой стиль:

* { margin: 0; padding: 0; }

Но символ "*" можно использовать в составных селекторах.

Ul * {color: red}

Этот код назначает красный цвет тексту всех потомков элемента

.

Классы

Классы в CSS - самый расрпостранённый способ назначения стиля группе элементов. Класс применяют когда нужно задать разные стили элементам html-документа, созданным одним тегом. Синтаксис класса:

Тег.Имя класса

В селекторе стиля вначале пишется нужный тег, затем, через точку указывается имя класса. Имя класса должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).

Пример, когда применяют классы: на сайте верхнее, боковое и нижнее меню создаётся при помощи тегов

, этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top , ul.menu и ul.menu-bottom .

В теле html-документа различные меню создаются с указанием класса в атрибуте class :

class ="menu-top "> ...


class ="menu "> ...


class ="menu-bottom "> ...

Классы - часто используемы инструмент CSS. Он удобен и, кроме того, делает код стиля более читаемым.

Можно создать класс, который будет применён к любому тегу. Для этого используется универсальный селектор.

*.Имя класса { свойство1 : значение ; свойство2 : значение ; ... }

Эту запись можно сократить, убрав символ "*".

Имя класса { свойство1 : значение ; свойство2 : значение ; ... }

ID селекторы (идентификаторы)

Идентификаторы - это типы селекторов, задающие уникальное имя элемента. Уникальное - значит встречающееся один раз в коде документа. При помощи идентификаторов можно создать стиль, но их основное предназначение - обращение к ним при помощи скриптов.

При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора.

#Имя идентификатора { свойство1 : значение ; свойство2 : значение ; ... }

Также, как и имя класса, имя идентификатора должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).

Селекторы атрибутов

В HTML есть ряд тегов, которые в зависимости от атрибутов меняют своё действие. Например, тег зависимости от значения атрибута type может создавать поле формы, кнопку и другие элементы формы. Так что, если применять стиль к селектору input , то он изменит все элементы формы, созданные этим тегом. Для точного управления такими элементами в CSS существуют селекторы атрибутов.

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

Селекторы атрибутов - тема отдельной большой статьи. В рамках этой статьи мы лишь отметим, что они есть.

Псевдоклассы

Ещё одна большая тема в CSS - псевдоклассы. Приставка "псевдо" обозначает мнимость или ложность. Дело в том, это элементы html документа меняются в зависимости от действий пользователя. Например ссылка меняется в зависимости от наведения на неё курсора.

При помощи псевдоклассов создаются динамические эффекты на странице.

Синтаксис псевдокласса:

Селектор:псевдокласс { свойство1 : значение ; свойство2 : значение ; ... }

Можно применять псевдоклассы к селекторам идентификаторов или классов (ul.menu:hover {color : green }).

Для новичков отмечу: если именам классов и идентификатов разработчик придумывает названия сам, то имена псевдоклассов в CSS - это зарезервированные слова.

Псевдокласс :active выполняет правило стиля, если элемент активен. Например, на ссылку наведён курсор и произведён клик. Псевдокласс :hover - курсор мыши просто наведён на элемент, например на ссылку.

Есть ещё много псевдоклассов. Полностью раскрыть тему псевдоклассов можно в рамках отдельной статьи. Тут мы коснулись её лишь поверхностно.

Псевдоэлементы

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

Псевдоэлементы CSS также обширная тема, для полного раскрытия которой требуется отдельная статья.

Синтаксис псевдоэлементов такой же, как и у псевдоклассов:

Селектор:псевдоэлемент { свойство1 : значение ; свойство2 : значение ; ... }

Влад Мержевич

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

Синтаксис применения идентификатора следующий.

Универсальный селектор

Влад Мержевич

Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.

Для обозначения универсального селектора применяется символ звёздочки (* ) и в общем случае синтаксис будет следующий.

* { Описание правил стиля }

Селекторы атрибутов

Влад Мержевич

Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type . При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов.

Дочерние селекторы

Влад Мержевич

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 12.1).

Пример 12.1. Вложенность элементов в документе

HTML5 CSS 2.1 IE Cr Op Sa Fx

Соседние селекторы

Влад Мержевич

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.

Lorem ipsum dolor sit amet.

В этом примере тег является дочерним по отношению к тегу

Поскольку он находится внутри этого контейнера. Соответственно

Выступает в качестве родителя .

Контекстные селекторы

Влад Мержевич

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега только когда он располагается внутри контейнера

Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.

Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.

К простым селекторам относятся:

• селектор типа
• универсальный селектор
• селекторы атрибутов
• селектор идентификатора
• селектор класса
• псевдо-классы

CSS селектор	Пример	Описание	CSS
.class	.myClass	Выбирает все элементы с классом myClass (class="myClass").	1
#id	#main	Выбирает элемент с идентификатором main (id="main").	1
	*	Выбор всех элементов.	2
элемент	span	Выбор всех элементов .	1
элемент,элемент	div,span	Выбор всех элементов и всех элементов .	1
[атрибут]		Выбирает все элементы с атрибутом title .	2
[атрибут="значение"]		Выбирает все элементы с атрибутом title , значение которого в точности совпадает со значением указанным в селекторе (title="cost").	2
[атрибут~="значение"]		Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) "один" (title="один и два").	2
[атрибут|="значение"]		Выбор всех элементов с атрибутом lang , значение которого начинается с "ru".	2
[атрибут^="значение"]	a	Выбор каждого элемента с атрибутом href , значение которого начинается с "https".	3
[атрибут$="значение"]		Выбирает все элементы с атрибутом src , значение которого оканчивается на ".png" (src="some_img.png").	3
[атрибут*="значение"]		Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) "один" (title="один и два").	3

Составной селектор - это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.

Span.className p.className1.className2#someId:hover

Сложный селектор - это последовательность селекторов, которые разделены комбинаторами.

Список селекторов - это селекторы, перечисленные через запятую.

Комбинаторы

Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.

Псевдо-классы

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

Псевдо-класс	Пример	Описание	CSS
:link	a:link	Выбор всех не посещенных ссылок.	1
:visited	a:visited	Выбор всех посещенных ссылок.	1
:active	a:active	Выбор активной ссылки.	1
:hover	a:hover	Выбор ссылки при наведении курсора мышки.	1
:focus	input:focus	Выбор элемента , который находится в фокусе.	2
:first-child	p:first-child	Выбор каждого элемента Который является первым дочерним элементом своего родителя.	2
:lang(язык)	p:lang(ru)	Выбор каждого элемента С атрибутом lang , значение которого начинается с "ru".	2
:first-of-type	p:first-of-type	Выбор каждого элемента Который является первым из элементов	3
:last-of-type	p:last-of-type	Выбор каждого элемента Который является последним из элементов Своего родительского элемента.	3
:only-of-type	p:only-of-type	Выбор каждого элемента Который является единственным элементом Своего родительского элемента.	3
:only-child	p:only-child	Выбор каждого элемента Который является единственным дочерним элементом своего родительского элемента.	3
:nth-child(n)	p:nth-child(2)	Выбор каждого элемента Своего родительского элемента.	3
:nth-last-child(n)	p:nth-last-child(2)	Выбор каждого элемента Который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента.	3
:nth-of-type(n)	p:nth-of-type(2)	Выбор каждого элемента Который является вторым дочерним элементом Своего родительского элемента.	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Выбор каждого элемента Который является вторым дочерним элементом Своего родительского элемента, считая от последнего дочернего элемента.	3
	3
:not(селектор)	:not(p)	Выбор всех элементов, кроме элемента .	3

Псевдо-элементы

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