Совокупность правил оформления (которые в свою очередь состоят из селекторов с блоком объявлений) примененных к определенным html тегам, за счет чего и формируется внешний вид сайта.

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

Так, именно благодаря селекторам браузер понимает к каким именно элементам кода страницы нужно применять конкретные стили оформления.

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

Виды css селекторов

Как и предложения в тексте селекторы CSS бывают простыми и сложными. Разница между ними заключается в том, что сложные получаются из объединения нескольких простых и используются для более точной настройки конечного оформления ресурса.

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

Простые селекторы

Универсальный селектор – отвечает за выбор вообще всех элементов в документе. Задается звездочкой. Обычно применяется для обнуления стилей браузеров, установленных в них по умолчанию, чтобы у всех, кто будет заходить на сайт не уплыло оформление в случае использования каких-то собственных настроек браузера или же различных плагинов…
* { какой- то стиль; }
Селектор типа – выбирает все теги, соответствующие определенному типу. Задается названием тега. Используется для задания общих правил оформления документа, к примеру, задать разные шрифты заголовкам и простому тексту документа.
h1 { какой- то стиль; }
– применит правило цсс ко всем тегам с конкретным названием класса. Задается точкой с написанным сразу после нее названием класса. Пожалуй самый часто встречающийся в верстке селектор. Обычно используется, чтобы задавать различные стили оформления тегам одинаковым по типу, но разным по функциональному назначению.
LeftColumn { какой- то стиль; }
Селектор идентификатора – применяется для оформления уникальных элементов на странице. Задается решеткой после которой идет название id. Используется, если нужно оформить один конкретный элемент страницы.
#alertButton { какой- то стиль; }
– выбирает теги у которых присутствует атрибут. Задается названием атрибута в квадратных скобках. Может использоваться как для оформления группы тегов в которых просто присутствует заданный атрибут, так и для группы тегов в которых присутствует заданный атрибут с определенным значением.
[ type] { какой- то стиль; } [ type= "submit" ] { какой- то стиль; } input[ type= "submit" ] { какой- то стиль; }

Сложные селекторы

Селектор потомка – выбор потомков (тегов находящихся внутри другого тега) элементов. Задается через пробел (родитель – пробел – потомок).
div p { какой- то стиль; }
Селектор дочернего элемента - выбор элемента непосредственно вложенного в другой элемент. Задается символом «>» (родитель-галочка-дочерний элемент). Дочерний элемент отличается от потомка тем, что следует непосредственно после родителя (первый уровень вложенности). В то время как потомком считается любой тег внутри другого не зависимо от уровня вложенности.
Sidebar> ul { какой- то стиль; }
Селектор сестринского элемента – выбирает тег идущий сразу после другого тега (не заключенный внутрь, а идущий далее). Задается плюсом (первый элемент – плюс – сестринский элемент). На практике используется редко. Обязательным условием применение является наличие общего родителя для всех элементов объединенным знаком «+».
h1+ p { какой- то стиль; }

Псевдоклассы и псевдоэлементы

Вышеперечисленная классификация селекторов CSS зависела исключтиельно от разметки документа. Если мы хотим задать изменение внешнего вида элементов в зависимости от изменения его состояния на странице (к примеру смена цвета кнопки при наведении), то мы можем использовать селекторы псевдоклассов и псевдоэлементов .

Помните, что в отличие от html в CSS регистр букв имеет значение. Тоесть класс.active и.Active это не одно и то же! Они применятся к разным элементам, если таковые есть в документе.
Называйте селекторы для оформления так, чтобы потом в них не запутаться: .leftColumn – хорошее название, .left – зависит от ситуации, но уже неочень, .llll – фигня какаято, ты сам то скажешь не глядя на код откуда этот класс взялся?
Еще раз напоминаю – если элемент на странице один, такой весь уникальный, то для него используем id, если же есть вероятность, что появится еще один такой или же просто подобных элементов на странице несколько, то пользуйтесь для оформления классами.

Подводя итоги

Селекторы в CSS – это мощнейший инструмент идентификации определенных элементов страницы или же группы элементов объединенных конкретным признаком для дальнейшего применения к ним стилей оформления из блока объявлений относящегося к данному селектору.

После освоения общих принципов взаимодействия и создания селекторов вы забудете о проблемах с оформлением веб-документов. Хорошее знание селекторов позволяет значительно сократить время верстки html страниц.

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

Селектор - это часть 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

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

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

Последнее обновление: 21.04.2016

Определение стиля начинается с селектора. Например:

Div{ width:50px; /* ширина */ height:50px; /* высота */ background-color:red; /* цвет фона */ margin: 10px; /* отступ от других элементов */ }

В данном случае селектором является div . Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т. д. При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То есть выше определенный стиль будет применяться ко всем элементам

на веб-странице:

Селекторы CSS

Здесь на странице 3 элемента div, и все они будут стилизованы:

Классы

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

Для определения селектора класса в CSS перед названием класса ставится точка:

RedBlock{ background-color:red; }

Название класса может быть произвольным. Например, в данном случае название класса - "redBlock". Однако при этом в имени класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания, причем начинать название класса должно обязательно с буквы.

Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы.

После определения класса мы можем его применить к элементу с помощью атрибута class . Например:

Определим и используем несколько классов:

Классы CSS

Идентификаторы

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

Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:

Идентификаторы CSS

Основное содержимое

Однако стоит заметить, что идентификаторы в большей степени относятся к структуре веб-странице и в меньшей степени к стилизации. Для стилизации преимущественно используются классы, нежели идентификаторы.

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

Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор , который представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:

*{ background-color: red; }

Стилизация группы селекторов

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

Селекторы CSS

CSS3

Селекторы

Группа селекторов

Некоторый текст...

Группа селекторов может содержать как селекторы тегов, так и селекторы классов и идентификаторов, например:

H1, #header, .redBlock{ color: red; }

CSS selectors define the elements to which a set of CSS rules apply.

Basic selectors

Universal selector Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.
Syntax: * ns |* *|*
Example: * will match all the elements of the document. Type selector Selects all elements that have the given node name.
Syntax: elementname
Example: input will match any element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. "> element. Class selector Selects all elements that have the given class attribute.
Syntax: . classname
Example: .index will match any element that has a class of "index". ID selector Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
Syntax: # idname
Example: #toc will match the element that has the ID "toc". Attribute selector Selects all elements that have the given attribute.
Syntax: [ attr ] [ attr = value ] [ attr ~= value ] [ attr |= value ] [ attr ^= value ] [ attr $= value ] [ attr *= value ]
Example: will match all elements that have the autoplay attribute set (to any value).

Grouping selectors

Selector list The , is a grouping method, it selects all the matching nodes.
Syntax: A , B
Example: div, span will match both and ) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.">

elements.

Combinators

Descendant combinator The (space) combinator selects nodes that are descendants of the first element.
Syntax: A B
Example: div span will match all elements that are inside a ) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.">

element. Child combinator The > combinator selects nodes that are direct children of the first element.
Syntax: A > B
Example: ul > li will match all element is used to represent an item in a list.">

elements that are nested directly inside a element represents an unordered list of items, typically rendered as a bulleted list.">

Syntax:

Example:

, immediately or not. Adjacent sibling combinator The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
Syntax: A + B
Example: h2 + p will match all element represents a paragraph.">

elements that directly follow an

. Column combinator The || combinator selects nodes which belong to a column.
Syntax: A || B
Example: col || td will match all element defines a cell of a table that contains data. It participates in the table model."> elements that belong to the scope of the element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a element."> .

Pseudo

Example:

Pseudo elements The:: pseudo represent entities that are not included in HTML.
Example: p::first-line will match the first line of all element represents a paragraph.">

elements.

Specifications

Specification	Status	Comment

Что такое селектор в css – это описание того элемента или группы элементов, которое показывает браузеру какой элемент выбрать для применения к нему стиля. Давайте рассмотрим основные CSS селекторы.

1) .Х

CSS селектор по классу Х . Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам.

Chrome
Firefox
Safari
Opera

2) #X

CSS селектор по id . Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным – только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.

Chrome
Firefox
Safari
Opera

3) *

CSS селектор всех элементов . Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.

Символ * также можно использовать чтобы выделить все дочерние элементы:

#header * { border: 5px solid grey; }

В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.

Chrome
Firefox
Safari
Opera

4) X

CSS селектор типа . Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше.

Chrome
Firefox
Safari
Opera

5) Х Y

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

Chrome
Firefox
Safari
Opera

6) Х + Y

Смежный селектор элементов выбирает только элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.

IE7 +
Firefox
Chrome
Safari
Chrome

7) Х > Y

CSS селектор потомков . Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:

Элемент списка
- Потомок первого элемента списка
Элемент списка
Элемент списка

CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.

Chrome
Firefox
Safari
Opera

8) Х ~ Y

Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.

Chrome
Firefox
Safari
Opera

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

Chrome
Firefox
Safari
Opera

10) X

CSS селектор по атрибуту . В этом примере выбираются только те ссылки, у которых есть атрибут title.

Chrome
Firefox
Safari
Opera

11) X

Chrome
Firefox
Safari
Opera

12) X

Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www..stijit.. Ко всем выбранным ссылкам будет применен золотой цвет.

Chrome
Firefox
Safari
Opera

13) X

На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.

Chrome
Firefox
Safari
Opera

14) X

Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением.jpg.

Chrome
Firefox
Safari
Opera

15) X

Здесь мы применяем CSS селектор по пользовательскому атрибуту . Добавляем наш собственный атрибут data-filetype в каждую ссылку:

ссылка

Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.

Chrome
Firefox
Safari
Opera

16) X

Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.

ссылка

С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:

/* Выбрать элемент, атрибут data-info которого содержит значение external */ a { color: green; } /* Выбрать элемент, атрибут data-info которого содержит значение image */ a { border: 2px dashed black; }

Chrome
Firefox
Safari
Opera

17) X:checked

Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.

Chrome
Firefox
Safari
Opera

18) X:after

Псевдоклассы:before и:after очень полезные – они создают контент до и после выбранного элемента.

Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .

Chrome
Firefox
Safari
Opera

19) X:hover

Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют:hover только к ссылкам.

A:hover { border-bottom: 1px dotted blue; }

IE6+ (В IE6 применимо только к ссылкам)
Chrome
Firefox
Safari
Opera

20) X:not(selector)

Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" .

По такому же принципу можно выбрать все элементы кроме p:

*:not(p) { color: blue; }

Chrome
Firefox
Safari
Opera

21) X::pseudoElement

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

Выбор первой буквы параграфа:

P::first-letter { font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; }

Выбор первой строки в параграфе:

P:first-line { font-size: 28px; font-weight: bold; }

Chrome
Firefox
Safari
Opera

22) X:first-child

Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1 .

Chrome
Firefox
Safari
Opera 3.5+
Android

23) X:last-child

Псевдокласс last-child выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3 .

IE9+ (IE8 поддерживает first-child, но не last-child. Microsoft (с))
Chrome
Firefox
Safari
Opera 9.6+
Android

24) X:only-child

Псевдокласс only-child позволяет выбрать те элементы, которые являются единственными потомками для своих родителей.

Chrome
Firefox
Safari 3.0+
Opera 9.6+
Android

25) X:nth-child(n)

Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2) . Все псевдоклассы с использованием nth-child появились только начиная с CSS 3 .

Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

26) X:nth-last-child(n)

Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109) , можно использовать селектор последних потомков nth-last-child . Этот метод такой же как и предыдущий, но отсчет ведется с конца.

Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

27) X:nth-of-type(n)

Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.

Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

28) X:nth-last-of-type(n)

Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.

Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

29) X:only-of-type

Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.

Chrome
Firefox 3.5+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

30) X:first-of-type

Псевдокласс first-of-type выбирает первый элемент заданного типа.

Chrome
Firefox 3.5+
Safari 3.1+
Opera 9.5+
Android 2.1+
iOS 2.0+