CSS: селекторы. Типы селекторов: дочерние, смежные, селекторы потомков и другие типы
Что такое селектор в 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 (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.
Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.
Объявление стиля состоит из двух частей: элемента веб-страницы — селектора , и команды форматирования — блока объявления . Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.
![](https://i0.wp.com/html5book.ru/wp-content/uploads/2014/12/css_osnovy.png)
Виды каскадных таблиц стилей и их специфика
1. Виды таблиц стилей
1.1. Внешняя таблица стилей
Внешняя таблица стилей представляет собой текстовый файл с расширением.css , в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега , расположенного внутри раздела
. Такие стили работают для всех страниц сайта.К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).
Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .
1.2. Внутренние стили
Внутренние стили встраиваются в раздел
HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style)....
1.3. Встроенные стили
Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:
Обратите внимание на этот текст.
Такие стили действуют только на тот элемент, для которого они заданы.
1.4. Правило @import
Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:
Правило @import также используется для подключения веб-шрифтов:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. Виды селекторов
Селекторы представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.
2.1. Универсальный селектор
Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .
2.2. Селектор элемента
Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .
2.3. Селектор класса
Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег
и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.
Инструкция пользования персональным компьютером
.headline { text-transform: uppercase; color: lightblue; }2.4. Селектор идентификатора
Селектор идентификатора позволяет форматировать один конкретный элемент. Идентификатор id должен быть уникальным и на одной странице может встречаться только один раз.
#sidebar { width: 300px; float: left; }
2.5. Селектор потомка
Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .
Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:
p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;
p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента
First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .
2.6. Дочерний селектор
Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .
2.7. Сестринский селектор
Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня.
h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом
, не затрагивая остальные абзацы;
h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.
2.8. Селектор атрибута
Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:
[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;
селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;
селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;
селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;
селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;
селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;
селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;
селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .
2.9. Селектор псевдокласса
Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Псевдоклассы характеризуют элементы со следующими свойствами:
:hover — любой элемент, по которому проводят курсором мыши;
:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;
:active — элемент, который был активизирован пользователем;
:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;
:invalid — поля формы, содержимое которых не соответствует указанному типу данных;
:enabled — все активные поля форм;
:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;
:in-range — поля формы, значения которых находятся в заданном диапазоне;
:out-of-range — поля формы, значения которых не входят в установленный диапазон;
:lang() — элементы с текстом на указанном языке;
:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;
:target — элемент с символом # , на который ссылаются в документе;
:checked — выделенные (выбранные пользователем) элементы формы.
2.10. Селектор структурных псевдоклассов
Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:
:nth-child(odd) — нечётные дочерние элементы;
:nth-child(even) — чётные дочерние элементы;
:nth-child(3n) — каждый третий элемент среди дочерних;
:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;
:nth-child(n+2) — выбирает все элементы, начиная со второго;
:nth-child(3) — выбирает третий дочерний элемент;
:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;
:first-child — позволяет оформить только самый первый дочерний элемент тега;
:last-child — позволяет форматировать последний дочерний элемент тега;
:only-child — выбирает элемент, являющийся единственным дочерним элементом;
:empty — выбирает элементы, у которых нет дочерних элементов;
:root — выбирает элемент, являющийся корневым в документе — элемент html .
2.11. Селектор структурных псевдоклассов типа
Указывают на конкретный тип дочернего тега:
:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;
:first-of-type — выбирает первый дочерний элемент данного типа;
:last-of-type — выбирает последний элемент данного типа;
:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;
:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.
2.12. Селектор псевдоэлемента
Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:
:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;
:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;
:before — вставляет генерируемое содержимое перед элементом;
:after — добавляет генерируемое содержимое после элемента.
3. Комбинация селекторов
Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:
img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .
4. Группировка селекторов
Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:
H1, h2, p, span { color: tomato; background: white; }
5. Наследование и каскад
Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.
5.1. Наследование
Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.
Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .
Принудительное наследование
С помощью ключевого слова inherit можно принудить элемент наследовать любое значение свойства родительского элемента. Это работает даже для тех свойств, которые не наследуются по умолчанию.
Как задаются и работают CSS-стили
1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);
2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;
3) К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.
![](https://i1.wp.com/html5book.ru/wp-content/uploads/2015/01/nasledovanie-stiley.png)
4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.
div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}
5.2. Каскад
Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.
Правило!important
Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.
Специфичность
Для каждого правила браузер вычисляет специфичность селектора , и если у элемента имеются конфликтующие объявления свойств, во внимание принимается правило, имеющее наибольшую специфичность. Значение специфичности состоит из четырех частей: 0, 0, 0, 0 . Специфичность селектора определяется следующим образом:
для
id добавляется 0, 1, 0, 0 ;
для
class добавляется 0, 0, 1, 0 ;
для
каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
для
встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
универсальный
селектор не имеет специфичности.
H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.
Порядок подключённых таблиц
Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-странице. Если в разных таблицах будут встречаться разные значения свойств одного элемента, то в результате к элементу применится правило, находящееся в таблице стилей, идущей в списке ниже.
Всем привет, хабрчане.
Сегодня CSS окружает нас вокруг, и даже маломайский программист должен понимать его.
Самыми используемыми являются старые добрые #id и.class они знакомы всем, кто хоть раз работа с CSS.
На этом конечно мир Селекторов далеко не ограничивается. Я уже довольно давно работаю с CSS и хочу поделится как можно большим количеством полезных селекторов. Все они определяют стиль того или иного объекта.
CSS Selectors
Объясняю многие селекторы применимо к указанному примеру.
.class
(Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке.#id
(Пр. #Block_Form) Этот селектор объедение элементы с id=«Block_Form» В чем скажите разница между.class и #id - а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что - Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса.Класс может быть использован многократно, идентификатор же должен быть уникальным.
*
Выбирает, объединяет все элементы(Пр. *) { background-color:yellow; })
element
(Пр. p) Объединяет все элементы тега p.element,element
(Пр. div,p) Объединяет все элементы div и все элементы p.
Так же в эту группу можно выделить похожие селекторы:
element element
(Пр. div p) Выбирает все элементы p внутри div.element>element
(Пр. div>p) Объединяет все p для которых родителем выступает div.element+element
(Пр. div+p) Объединяет все p которые расположены сразу после div. (Пр. ) Объединяет все элементы с атрибутом target (Пр. ) Объединяет все элементы с заданным target="_blank" (Пр. ) Объединяет все элементы, которые в своем title содержат «Apple» (Пр. ) Объединяет все элементы с атрибутом class начиння с «top»Все теги написаны были без "<>".
Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач - от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом.
Так же их называют Псевдокласы:
:link
(Пр. a:link) Объединяет все ссылки, которые еще не посещались (Пр. a:visited) Объединяет все ссылки, которые пользователь уже успел посетить:active
(Пр. a:active) Псевдокласс:active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.:hover
(Пр. a:hover) Когда проводишь мышкой, ссылка может менять стиль:focus
(Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем:first-letter
(Пр. p:first-letter) Определяет стиль для первого символа в тексте элемента:first-line
(Пр. p:first-line) Определяет стиль первой строки. Использую для изменения цвета текста, цвета фона и шрифта, но как показывают народные хабрумельцы на этом его функции не ограничиваются:first-child
(Пр. p:first-child) Что бы просто объяснить - применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителяДальше идут два очень интересных класса:
:before
(Пр. p:before):after
(Пр. p:after)Они применяются в тех случаях, когда - нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:"";. Также нужно помнить о том, что при добавлении:before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении:before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется.
:lang(language)
(Пр. p:lang(it)) Довольно простой, но порой нужный элемент - для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»Селекторы CSS3
Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.
element1~element2
(Пр. p~ul)p~ul { background:red; } Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря - на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.
- Item
- Item
- Item
- Item
- Item
- Item
а в этом случае поля Айтемов будут иметь бэк-цвет - красный. (Пр. a) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:
Item4
Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4. (Пр. a) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на ". PDF. И вот еще один наглядный пример:
Item4
На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3. (Пр. a) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».
Item4