CSS: селекторы. Типы селекторов: дочерние, смежные, селекторы потомков и другие типы. Виды CSS селекторов Как применить данный стиль

, каждому из которых нужно задать определенный цвет. Как это сделать? Стандартные CSS selectors по тегам не подойдут, они указывают параметры для всех блоков сразу. Выход прост. Назначьте элементам класс. Например, первый div получил class=’red’, второй - class=’blue’, третий - class=’green’. Теперь их можно выбрать, используя таблицы CSS.

Синтаксис таков: указываем точку («.»), после которой пишем название класса. Чтобы управлять первым блоком, используем конструкцию.red. Вторым - .blue и так далее.

Важно! Рекомендуется использовать понятные значения атрибута class. Дурным тоном считается использование транслита (например, krasiviy-blok) или случайных комбинаций букв/цифр (ojfh834871). В таком коде вы обязательно запутаетесь, не говоря уже о том, с какими трудностями придется столкнуться тем, кто будет заниматься проектом после вас. Оптимальный вариант - использовать какую-нибудь методологию, вроде БЭМ.

Достоинства - довольно высокая гибкость.

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

Селектор по ID

Насчет этого варианта мнения верстальщиков и программистов неоднозначны. Некоторые учебники CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Однако многие специалисты активно расставляют их по всей разметке. Решать вам. Синтаксис таков: символ решетки (« # »), затем имя блока. Например, #red.

ID отличается от класса по нескольким параметрам. Во-первых, на странице не может быть двух одинаковых ID. Им назначаются уникальные имена. Во-вторых, такой селектор обладает более высоким приоритетом. Это значит, что если вы зададите блоку класс red и укажете в таблицах CSS красный а затем назначите ему же id blue и укажете синий цвет, блок станет синим.

Достоинства - можно управлять конкретным элементом, не обращая внимания на стили для тегов и классов.

Недостатки - легко запутаться в большом количестве ID и class.

Важно! Если вы пользуетесь методологией БЭМ (или ее аналогами), ID вам, в общем-то, не нужны. Такая техника верстки подразумевает использование уникальных классов, что гораздо удобнее.

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

Синтаксис: знак зведочки («*») и фигурные скобки, т. е. * {}.

Используется для назначения определенных атрибутов сразу всем элементам страницы. Когда это может пригодиться? Например, если вы хотите задать странице свойство box-sizing: border-box. Может использоваться не только для управления всеми компонентами документа, но и для контроля всеми дочерними элементами определенного блока, например, div *{}.

Достоинства - можно управлять большим количеством элементов одновременно.

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

По атрибутам

Дают возможность управлять элементом с конкретным атрибутом. Например, у вас есть несколько тегов input с разным атрибутом type. Один из них - text, второй - password, третий - number. Конечно, можно задать каждому классы или ID, но это не всегда удобно. CSS selectors по атрибутам дают возможность указать значения для определенных тегов с максимальной точностью. Например, вот так:

input{}

Этот селектор атрибутов выберет все input с типом text.

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

Представим, что на вашей странице есть input с атрибутом placeholder=“Введите имя“ и input placeholder=“Введите пароль“. Их также можно выбрать с помощью селектора! Для этого используется следующая конструкция:

input{} или input

Возможна более гибкая работа с атрибутами. Допустим, у вас есть несколько тегов с похожими атрибутами title (скажем, «каспийский» и «каспийская»). Чтобы выбрать оба, используем следующие селекторы:

CSS выберет все элементы, в тайтле которых имеются символы «каспийск», т. е. и «каспийский», и «каспийская».

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

или заканчиваются ими:

{}.

Достоинства - максимальная гибкость. Можно выбирать любые существующие элементы страницы без возни с классами.

Недостатки - используется относительно редко, только в специфических случаях. Многие верстальщики предпочитают методологии, поскольку указать класс бывает проще, чем расставлять многочисленные и знаки «равно». Вдобавок, эти селекторы не работают в Internet Explorer версии 7 и ниже. Впрочем, кому сейчас нужны старые Internet Explorer?

Селекторы псевдоклассов

Псевдокласс обозначает состояние элемента. Например, :hover - то, что происходит с частью страницы при наведении курсора, :visited - посещенная ссылка. Сюда же входят элементы вроде:first-child и:last-child.

Этот тип селекторов активно применяется в современной верстке, поскольку благодаря ему можно сделать страницу «живой» без применения JavaScript. Например, вы хотите сделать так, чтобы при наведении на кнопку с классом btn ее цвет менялся. Для этого используем следующую конструкцию:

Btn:hover {

Background-color: red;

Для красоты можно указать в основных свойствах этой кнопки свойство transition, например, в 0,5s - в таком случае кнопка будет краснеть не мгновенно, а в течение полусекунды.

Достоинства - активно используются для «оживления» страниц. Просты в применении.

Недостатки - их нет. Это действительно удобное средство. Однако неопытные верстальщики могут запутаться в обилии псевдоклассов. Проблема решается учебой и практикой.

Селекторы псевдоэлементов

«Псевдоэлементы» - это те части страницы, которых нет в HTML, но ими все равно можно управлять. Ничего не поняли? Все проще, чем кажется. Например, вы хотите сделать первую букву в строке большой и красной, оставив прочий текст маленьким и черным. Конечно, можно заключить эту букву в span с определенным классом, но это долго и скучно. Гораздо проще выделить весь абзац и использовать псевдоэлемент::first-letter. Он дает возможность управлять внешним видом первой буквы.

Существует довольно большое количество псевдоэлементов. Перечислить их в рамках одной статьи вряд ли получится. Вы можете найти соответствующую информацию в любимом поисковике.

Достоинства - дают возможность гибко настраивать внешний вид страницы.

Недостатки - новички в них часто путаются. Многие селекторы этого типа работают только в определенных браузерах.

Подведем итог

Селектор - мощное средство контроля потока документа. Благодаря ему можно выбрать абсолютно каждый компонент страницы (даже существующий лишь условно). Обязательно выучите все имеющиеся варианты или хотя бы запишите их. Это особенно важно, если вы создаете сложные страницы с современным дизайном и большим количеством интерактивных элементов.

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

1) .Х

.topic-title { background-color: yellow; }

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

• Chrome
• Firefox
• Safari
• Opera

2) #X

#content { width: 960px; margin: 0 auto; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

3) *

* { margin: 0; padding: 0; }

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

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

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

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

4) X

a { color: green; } ol { margin-left: 15px; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

5) Х Y

li a { font-weight: bold; text-decoration: none; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

6) Х + Y

div + p { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; }

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

Какими браузерами поддерживается:
• IE7 +
• Firefox
• Chrome
• Safari
• Chrome

7) Х > Y

#content > ul { border: 1px solid green; }

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

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

8) Х ~ Y

ol ~ p { margin-left: 10px; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

a:link { color: green; } a:visited { color: grey; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

10) X

a { color: red; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

11) X

a { color: yellow; }

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

12) X

a { color: #dfc11f; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

13) X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

14) X

a { color: green; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

15) X

a { color: green; }

Здесь мы применяем 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

input:checked { border: 3px outset black; }

Этот псевдокласс выделяет только такие элементы, как 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

div:hover { background-color: rgba(11,77,130,0.5); }

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

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

Какими браузерами поддерживается:
• IE6+ (В IE6 применимо только к ссылкам)
• Chrome
• Firefox
• Safari
• Opera

20) X:not(selector)

div:not(#content) { color: grey; }

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

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

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

21) X::pseudoElement

p::first-line { font-weight: bold; font-size: 24px; }

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

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

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

ul li:first-child { border-top: none; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera 3.5+
• Android

23) X:last-child

ul > li:last-child { border-bottom: none; }

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

Какими браузерами поддерживается:
• IE9+ (IE8 поддерживает first-child, но не last-child. Microsoft (с))
• Chrome
• Firefox
• Safari
• Opera 9.6+
• Android

24) X:only-child

div p:only-child { color: green; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari 3.0+
• Opera 9.6+
• Android

25) X:nth-child(n)

li:nth-child(3) { color: black; }

Выбирает дочерний элемент по номеру, указанному в параметре. Селектор 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)

li:nth-last-child(2) { color: red; }

Если у вас большой список элементов в 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)

ul:nth-of-type(3) { border: 1px dotted black; }

Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального 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)

ul:nth-last-of-type(3) { border: 2px ridge blue; }

Псевдокласс 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

li:only-of-type { font-weight: bold; }

Псевдокласс 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

ul:first-of-type > li:nth-child(3) { font-style: italic; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox 3.5+
• Safari 3.1+
• Opera 9.5+
• Android 2.1+
• iOS 2.0+

Селектор в CSS — это указатель на элемент или группу элементов, к которым будут применяется правила стилей. Существуют следующие виды селекторов:

1. Селекторы по тэгам : h1

2. Селектор по id : #main

3. Селекторы по классам : .hidden

4. Селектор по нескольким классам

Записываются слитно без пробелов. Селекторы удовлетворяющие одновременно сразу нескольким условиям (логическое “И”). Стили будут применяться ко всем элементам, которые одновременно имеют и класс.hidden и класс.closed .

Hidden.closed

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

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

P strong ul .selected .header .menu a

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

Выделяет последующий элемент. Записываются с помощью знака + . Читается как: применить свойства к селектор2 который должен быть сразу после селектор1 .

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

... .green + .selected {}

В примере.green + .selected применит стили ко второму элементу, т.к. перед ним есть элемент с классом.green . Селектор.green + li тоже применит стили ко второму элементу, а селектор.selected + .green не сработает.

7. Родственные селекторы

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

• item

Selected too

Not selected ... ul ~ p {}

В данном примере будут выбраны все элементы p, идущие за ul. В то время, как при использовании селектора ul + p будет выбран только первый элемент.

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

Записываются с помощью знака > и распространяются только на элементы первого уровня вложенности. На элементы вложенные в другие элементы не распространяются.

Ul > li {}

В случае контекстных селекторов они влияют на всех потомков (например если задать ul li) что не всегда удобно. Дочерние селекторы позволяют задать стили только для элементов первого уровня вложенности.

ul > li означает то же, что и ul li , но выбираются только li первого уровня вложенности, которые напрямую являются вложенными в ul. На li вложенные в другие дочерные li элементы, правила уже не будут действовать.

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

Чаще всего используются при работе с формами. Селекторы атрибутов записываются с использованием квадратных скобок элемент[атрибут] .

Примеры селекторов атрибутов:

Input input div a a a a

В примере выше ~ позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой, например из:

10. Глобальный селектор

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

* { margin: 0; padding: 0; } .content * { outline: none; }

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

Примеры псевдоклассов:

A:link a:visited a:active a:hover input:checked .clearfix:after {} div:not(#container) p::first-line p::first-letter

Псевдокласс отрицания:not бывает очень полезным. Например, когда необходимо выбрать все div, за исключением того, который имеет id container.

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

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

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

Создание CSS правил в 2 словах

Каскадная таблица стилей представляет собой набор CSS правил, каждое из которых призвано форматировать определенный элемент веб-страницы. Само правило состоит из 2 частей:

1. Селектор
2. Блок объявлений

При помощи селектора мы указываем элемент, на который будем воздействовать. С помощью блока объявлений мы задаем параметры для выбранных элементов. Блок объявлений в свою очередь состоит из 2 частей:

1. Свойство
2. Значение

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

Селектор тегов

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

P {
font-family: Verdana;
}

Если мы захотим принять шрифт Verdana для заголовков первого уровня, будет справедлива следующая запись:

H1 {
font-family: Verdana;
}

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

Групповой вид селекторов

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

P, h1 {
font-family: Verdana;
}

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

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

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

* {
font-family: Verdana;
}

Селектор классов

Как видно из названия, при помощи этого вида селекторов мы выбираем элементы по определенным классам. При необходимости в форматировании блочных элементов с классом "container" используется следующая запись:

Container {
font-family: Verdana;
}

Достаточно прописать точку и название класса. Хочется отметить что все элементы, вложенные в блочный элемент с классом "container" также будут отформатированы.

Селектор идентификаторов

Здесь та же история как и с классами. Разница лишь в том что вместо точки мы прописываем - "#". Для форматирования абзаца с id "unique" необходима следующая запись:

#unique {
font-family: Verdana;
}

Древовидная форма HTML

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

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

древовидная форма HTML

Как видно из иллюстрации выше, тег body является предком для всех остальных тегов. Вложенный в него тег div является его дочерним элементом, сам будучи родителем тегов h2, p и предком тега a. А маркированный список первого уровня имеет 3 дочерних (li, ul) и 2 потомственных элемента (li).

Все вышеперечисленные теги вписываются в три вида отношений:

1. предок - потомок
2. родитель - дочерний элемент
3. сестринские элементы (теги одного уровня с общим родителем)

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

Селектор потомков

В случае необходимости форматирования потомков определённого тега мы пользуемся соответствующим селектором. Например, для форматирования всех вложенных абзацев в блочный элемент (div) используется следующая запись:

Div p {
color: blue;
}

Вначале мы указываем предка, затем через пробел - потомственный элемент. Запись выше означает: "Отобразите синим цветом все абзацы находящиеся внутри тега div". Для форматирования всех ссылок внутри абзаца мы пишем следующее:

P a {
color: red;
}

Запись выше означает: "Отобразите красным цветом все ссылки, находящиеся внутри абзацев". Как видите - все очень просто.

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

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

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

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

Info>p {
font-family: Arial;
}

Запись выше означает: "Отобразить шрифтом Arial все абзацы, являющиеся дочерними блоку с классом info". Если же нам нужно выделить дочерние пункты маркированного списка, аналогично пишем следующее:

Ul>li {
color: blue;
}

Запись выше означает: "Перекрасить все дочерние пункты маркированного списка в синий цвет". Такое правило CSS вполне может пригодиться, ведь внутри одного списка вполне может располагаться другой.

В некоторых случаях может возникнуть необходимость выделения не всех дочерних элементов, а только некоторых. Для управления первым дочерним элементов необходимо воспользоваться псевдоэлемнтом :first-child

Wrapper:first-child {
font-family: Tahoma;
}

Правило выше означает: "Отобразить первый дочерний элемент класса "wrapper" шрифтом Tahoma".

Псевдоэлемент :last-child помогает управлять последним дочерним элементом:

Wrapper:last-child {
font-family: Tahoma;
}

У нас также есть возможность выбирать любой по счету дочерний элемент при помощи псевдоэлемента :nth-child

Wrapper:nth-child(even) {
color: pink;
}

Запись выше означает: "Выделить все чётные дочерние элементы класса "wrapper" розовым цветом". Для выделения нечетных элементов even нужно заменить на odd .

Для выделения каждого 5 элемента необходимо добавить 5n. Если же стоит выделить каждый 4-й элемент начиная с шестого необходимо в скобках указать - 4n+6. Значения в скобках можно менять по-своему усмотрению:

Wrapper:nth-child(3n+2) {
border-bottom: 1px solid black;
}

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

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

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

A:link Отвечает за внешний вид ссылки в спокойном состоянии a:hover Отвечает за внешний вид ссылки в момент наведения на неё курсором мыши a:active Отвечает за внешний вид ссылки в момент нажатия на неё a:visited Отвечает за внешний вид уже посещенной ссылки

Пример того, как могут быть использованы эти псевдоклассы:

A:link {
color: blue;
}

a:hover {
color: orange;
}

a:active {
color: red;
}

a:link {
color: grey;
}

Запись выше означает: "Выделить синим цветом ссылки в обычном состоянии. Отображать их оранжевым цветом в момент наведения по ним. Отображать ссылки красного цвета в момент нажатия. Выделить серым цветом уже посещенные ссылки."

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

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

Img:hover {
border: 1px solid grey;
}

Запись выше означает: "Выделить все изображения рамкой серого цвета в момент наведения по ним." Таким же образом можно настраивать любые другие элементы в момент проведения по ним курсором.

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

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

P.attention:before {
content: "Внимание!";
}

Запись выше означает: "Добавить слово "Внимание!" перед абзацами с классом attention". Для добавления в конце элемента мы пишем:

P.attention:after {
content: "Внимание!";
}

Псевдоэлемент :focus помогает управлять внешним видом полей для ввода:

Input:focus {
background-color: blue;
font-style: italic;
}

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

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

::selection {
color: white;
background-color: black;
}

Правило выше означает: "Отображать фон черным, а цвет шрифта белым в момент выделения текста". Этот селектор незнаком для браузера Firefox, и для решения этой задачи необходимо перед правилом добавить следующее:

::-moz-selection {
color: white;
background-color: black;
}

Дочерние элементы по типу

Данный вид селекторов ценен тем, что мы можем управлять не просто дочерними элементами, а теми которые относятся к определенному типу.

Например, мы можем выделить первый дочерний нумерованный список блока с классом container:

Container>ol:first-of-type {
color: yellow;
}

Плюс ко всему мы имеем в распоряжении псевдоэлементы :last-of-type и :nth-of-type , которые имитируют:last-child и:nth-child соответственно.

#main>h2:last-of-type {
color: yellow;
}

В примере выше мы выделили последний дочерний заголовок второго уровня относящийся к блоку с идентификатором main.

Селектор смежных элементов

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

H1+p {
font: italic 20px Arial;
}

Согласно правилу выше, если между заголовком h1 и абзацем окажется что-то ещё, например изображение, то в этом случае тег p не будет отформатирован. Также вместо знака плюс можно использовать ~ (тильда) . При помощи неё будут отформатированы все маркированные списки после заголовка h1:

H1~ul {
color: orange;
}

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

Используя этот вид селектора можно форматировать элементы выбрав их по атрибуту. Для управления всеми внешними ссылками нужно указать следующее:

A {
color: aqua;
}

Запись href^="http://" означает что необходимо выделить все ссылки, начинающиеся на http://. Такие css правила имеют место быть, потому что абсолютные адреса в основном используются для внешних ссылок.

A {
color: brown;
}

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

Img {
border: 2px dashed grey;
}

Знак звездочки помогает выбрать те изображения, которые в своем названии содержат слово boots.

Для выделения всех изображений, находящихся в блоке с классом relative мы создаем следующее css правило:

Relative {
border: 2px dashed grey;
}

Псевдокласс отрицания

Если вам когда-нибудь приходилось иметь дело с движком WordPress, вы должны знать что в ней все ссылки имеют абсолютный вид. Как мы рассматривали выше, при необходимости выделить внешние ссылки можно использовать селектор по атрибуту, те которые начинаются на http://. Как вы понимаете, такой вариант решения вопроса с движком WordPress не прокатит. Но у нас в арсенале есть гениальный псевдокласс отрицания, который мы можем задействовать:

A:not() {
border: 2px dashed brown;
}

Правило выше означает: "Выделить коричневым цветом все ссылки, начинающиеся на http:// кроме тех, которые начинаются на http://mysite.com". Псевдокласс отрицания можно использовать не только с селекторами атрибутов, но и с другими простыми селекторами.

Стоит знать что для каждого селектора можно использовать только один псевдокласс отрицания. Следующая запись будет неверной - .container:not(#info):not(h3)

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

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

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!