Совокупность правил оформления (которые в свою очередь состоят из селекторов с блоком объявлений) примененных к определенным 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 страниц.
Тема хоть и кажется крайне запутанной на первый взгляд становится простой и понятной после некоторого периода практики, подкрепленного качественной теорией.
Ну для начала, скажу что селектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS .
Селектор по элементу
До этого момента, мы с вами работали именно с этим селектором.Т.е. в качестве селектора использовалось непосредственно имя html элемента, к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса.
P
{
font-size: 12px
}
А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придет селектор по классу .
Селектор по классу
Давайте разберем как создать универсальный класс в CSS . А сделать это очень просто: сначала ставим точку, затем сразу, без пробела,пишем имя класса, ну а затем в фигурных скобках стиль. Ну например:
.green
{
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}
Как применить данный стиль?
Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html:
class ="green "> ... текст параграфа...
Как видите используется атрибут class со значением названия стиля. Понятно? вот вам еще примерчик:
Это обычный параграф, для него используется селектор по элементу
Class ="green "> Этот параграф зеленый, т.к к нему применили класс
Class ="big_red " > А этот параграф большего шрифта и красный
Этот параграф снова обычный, по классу селектора элемента
p
{
font-family:arial,verdana,sans-serif;
font-size:18px;
}
.green
{color:green;}
.big_red
{
font-size:28px;
color:red;
}
Указываем сначала базовый стиль для всех параграфов(селектор по элементу), а потом уже, если хотим в каком-либо параграфе что-то изменить, создаем для него специальный стиль (селектор по классу) и присваиваем его этому параграфу. Когда мы создаем этот самый специальный класс, мы должны писать туда только те свойства, которые хотим добавить, или изменить, по отношению к базовому стилю для этого элемента.
Классы из примера выше, можно применить не только к параграфу, но и например к заголовкам, или например к ячейке таблицы, или ко всей таблице, короче они могут применяться везде, где они могут на что-то повлиять (в данном случае везде, где есть параметр цвет, и текст).
Сделать так, чтобы класс действовал только на определенный элемент(например параграф) можно указав название элемента перед точкой:
P.green {color:green;}
Теперь класс green не будет действовать ни на что другое, кроме элемента P.
Наверх
Селектор по id
Данный селектор применяется если необходимо выделить один единственный элемент, уникальный,отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом:
html- часть:
<Н1 id ="firstheader "> Первый заголовок на странице
css - часть:
H1 #firstheader { color: red; font-weight: bold; text-align: center }
Как видите в html-части вместо атрибута class здесь употребляется атрибут id , а в css - вместо точки употребляется знак #.
В принципе, то же самое можно сделать и с использованием селектора по классу, это уже кому как больше нравится:)
Наверх
Контекстный селектор
Это очень полезная вещь. Допустим у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом(strong) слова. И вот, нам резко понадобилось сделать так, чтобы слова, в параграфе, которые выделены жирным стали зеленого цвета. Так вот.
Что такое селектор в 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
Псевдо-класс: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 используются для определения конкретного
элемента в html-странице, для которого надо применить
или изменить стиль CSS.
Виды селекторов в CSS
Селектор по элементам
Для придания необходимого CSS-стиля в данном случае в качестве селектора записывается название html элемента. Например, достаточно прописать нужный стиль для заголовка H1, после чего данные заголовки примут требуемый нам вид. Вот таким будет код:
H1 {
font-size: 11pt;
}
Часто бывают случаи, когда надо сделать заголовки в разных стилях. Здесь для решения этой проблемы поможет селектор по классу.
Селектор по классам
Селектор по классу является универсальным в CSS. Записать его можно следующим образом: перед названием класса пишем точку, а уже потом в фигурных скобочках указываем необходимый нам стиль:
.red {
font-family: tahoma, sans-serif;
color: red;
font-size: 11pt;
}
Пример использования селектора по классу. Применим данный стиль к заголовку H1 в html странице:
Заголовок страницы
Из примера выше видно, что применяется атрибут "class" с заданным названием CSS стиля "red
".
Другой пример. В html части пишем:
Данный заголовок синего цвета, так как к нему применен соответствующий класс
id ".
В html документе это будет выглядеть так:
Зададим стиль для данного параграфа
В документе CSS:
p#newstyle { color: blue; font-size: 12px;}В результате, для данного параграфа будет применен шрифт синего цвета и размером 12px.
Контекстный селектор
Не менее нужным компонентом является контекстный селектор .
Например, на сайте возникла необходимость заголовки "H1", заключенные тегом bold выделить красным цветом:H1 bold { color:red ; }Как видим, в первую очередь пишется заголовок H1, ставится пробел, тег bold а затем в скобочках заданный нами стиль. Выразить словами это можно так: "При наличии внутри заголовка H1 тега bold текст должен быть красного цвета".
Этим способом можно задать также стили для пунктов маркированных списков, таблиц и даже их ячеек, причем с разным уровнем вложенности.
Следующая страница -
". Итак, селектор - это элемент, к которому применяется объявление в правиле стиля.
Термины, используемые в описании правил CSS.
Рис.1. Обычное правило CSS. Рис.2. Пример правила CSS.
Коротко про синтаксис записи правил CSS:
- Объявление стиля в парвиле берётся в фигурные скобки - {}
- Свойство и значение в объявлении разделяются двоеточием - :
- В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
- В конце каждой пары свойство: значение ставится точка с запятой - ;
- После последней пары свойство: значение точку с запятой ставить не обязательно.
- Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
- Синтаксис CSS не чувствителен к регистру символов.
В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.
Селекторы тегов
Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.
Синтаксис CSS Привет!
Заголовок h2!
Кстати, можно группе селекторов задать одно объявление. Например, мы хотим чтобы теги заголовков
,
и
были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
Группирование в CSS Привет h1!
Заголовок h2!
Такая запись стиля равносильна следующей группе правил:
Селекторы потомков
Можно назначать стилевые правила элементам в зависимости от того, вложен ли этот элемент в другой. Если один тег вложен в другой, то вложенный тег называется его потомком, а тег в который вложен потомок называется предком. Например, нужно задать абзацам
Внутри таблицы
красный цвет текста. Для решения такой задачи в селекторе элементы располагаются в порядке вложенности и разделяются пробелами. То есть наша задача решается так:
Селекторы потомков в CSS
Привет!
Текст абзаца в таблице.
Текст абзаца вне таблицы.
Все теги
Во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег
Находящийся внутри тега
тоже отображает текст красным цветом.На самом деле, вместо
можно было указать тег
, так как тег всегда должен содержать тег
. Для дальнейшего изучения селекторов CSS нужно освоить несколько несложных терминов относящихся к структуре документа.
Дерево документа (англ. document tree) - это схема построения HTML документа, показывающая порядок следования тегов и их вложенность друг в друга. Приведём пример такой схемы:
Дерево документа наглядно показывает связи в HTML документе, порядок следования тегов и их вложенность. Его используют разработчики для написания CSS стилей и JavaScript сценариев.
Вот пример кода, соответствующего схеме дерева элементов с рисунка 1.
Дерево документа. Привет!
Текст абзаца и жирный.
- Пункт 1.1
- Пункт 1.2
- Пункт 1.3
- Пункт 2.1
- Пункт 2.2
- Пункт 2.3
Итак, между тегами HTML документа существуют связи. Они выражаются в вложенности тегов или порядке следования одного тега за другим. Эти связи называют родственные связи, а для обозначения различных типов родственных связей используют термины, такие как предок и потомок, родительский и дочерний элемент и другией "семейные" термины.
Теперь рассмотрим все типы связей.
Предки и потомки
Предки (ancestor) - элементы, которые содержат другие элементы, то есть элемент является предком для всех вложенных в него элементов.
Потомки (descendant) - элементы, вложенные в другой элемент.
Селекторы потомков уже были рассмотрены выше.
Родители и дочерние элементы
Родитель (parent) - это предок первого уровня (непосредственный предок) для элемента. Дочерний элемент (child - ребёнок) - это потомок первого уровня. Родительский элемент может иметь неограниченное число детей.
В нашем дереве элементов у тега
следующие дочерние элементы:,
,
и ещё один
Братские или сестринские элементы
Братские или сестринские элементы, (англ. siblings - братья и сестры), группа элементов имеющая общего родителя. Например, теги
,
,
и второй
Сестринские, так как у них общий родитель
.Смежные элементы
Смежные элементы - это соседние братские элементы, то есть элементы имеющие общего родителя и идущие радом в дереве элементов. В нашем примере смежными элементами будут пары:
и
,
И
,
и
Теперь вернёмся к селекторам.
Дочерние селекторы
Когда нас интересуют не все потомки, а только потомки первого уровня, то есть дочерние элементы, в CSS используют дочерние селекторы. Для указания того, что правило стиля задано только к дочернему элементу, в селекторе используется символ ">".
Дочерние селекторы в CSS
Привет!
Текст абзаца в таблице.
Текст абзаца в таблице (в контейнере div).
Текст абзаца вне таблицы.
HTML-код этого примера полностью совпадает с кодом примера для селектора потомков, отличается только правило стиля. В результате применения дочернего селектора текст абзаца в таблице в контейнере
уже не красного цвета, так как для этого абзаца тегродитель, а тегпредок. Смежный (соседний) селектор
Селектор смежного элемента выбирает элемент, расположенный непосредственно за другим заданным элементом. Синтаксис этого селектора: селектор предыдущего элемента, знак "+" и за ним селектор выбираемого элемента.
Давайте рассмотрим реальный пример. В больших статьях, содержащих несколько разделов озаглавленных тегами
, желательно увеличить верхний отступ (свойство margin-top ). Отступ в 20px будет придавать тексту читабельности. Но вот в случае, если тег
идёт сразу после
, а это может быть в начале статьи, вержний отступ над тегом
будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
Вот html-код с примером работы селектора смежного элемента.
Смежный селектор в CSS Привет!
Заголовок h2
Заголовок h2
Текст абзаца в про невероятные приключения.
Другое название смежных селекторов: соседние селекторы , тут можно прочитать подробнее про этот тип селекторов.
Родственный селекторы
Селектор родственного элемента похож на соседний селектор, только он распространяется на все указанные элементы, следующие за выбранным. Синтаксис родственного селектора: селектор предыдущего элемента, знак "~" (тильда) и за ним селектор выбираемых элементов.
Пример исользования сестринского селектора.
Селектор родственного элемента в CSS Привет!
Текст абзаца №1 в про невероятные приключения.
Текст абзаца №2 в про невероятные приключения.
Текст div №1 в про невероятные приключения.Текст абзаца №3 в про невероятные приключения.
Из примера видно, что после
тега текст абзаца №3 также был красным цветом. То есть, для присвоения стиля сестринские элементы не должны идти друг за другом.Универсальный селектор
Если в селекторе правила 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 : значение ; ... }
