Child selector css: Селектор дочерних элементов — Веб-технологии для разработчиков

Содержание

Почему у нас нет селектора по родителю — Веб-стандарты

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

Вкратце: производительность.

Как работает CSS#

В связи с моей работой я делаю много тестов производительности. Для определения «узких мест» мы используем массу приложений. Например, Google Page Speed, который дает рекомендации по улучшению производительности JavaScript и рендеринга. Прежде чем я перейду к рассмотрению этих рекомендаций, нам нужно разобраться как браузеры работают с CSS

Стиль элемента применяется в момент его создания#

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

Взгляните на этот документ:

<body>
    <div>
        <div>
            <p>Lorem Ipsum</p>
        </div>
        <div>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum <span>Test</span></p>
        </div>
    </div>
</body>

Браузер начинает сначала и видит элемент <body>. В этот момент времени считается, что этот узел не имеет дочерних узлов. Ничего более не рассматривается. Браузер определяет соответствующий ему обобщенный набор стилей и применяет его к элементу. Какой шрифт, цвет, интерлиньяж? После того, как это все будет выяснено, элемент отображается на экране.

Далее браузер видит элемент <div> со значением атрибута ID content. И снова в этот момент времени браузер считает его пустым. Он не рассматривает другие элементы. Как только браузер рассчитает стиль, элемент отображается на экране. Затем браузер определяет нужно ли перерисовать

<body> — стал ли элемент шире или выше? Я подозреваю, что там есть масса других проверок, но изменение ширины и высоты — самый распространенный способ повлиять на отображение родительского узла.

Процесс продолжается, пока браузер не достигнет корневого узла документа.

Вот как выглядит визуализация процессов перерисовки в Firefox:

CSS-селекторы анализируются справа налево#

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

Если у вас есть селектор body div#content p { color: #003366; }, то, когда каждый элемент появляется на странице, браузер проверяет, является ли он параграфом. Если да, он начинает подниматься вверх по DOM и ищет <div> со значением атрибута ID равным content. Если он его находит, то продолжает подниматься по DOM пока не найдет <body>.

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

Правила#

Возвращаясь к Page Speed, давайте рассмотрим несколько его рекомендаций:

Избегайте селектора по потомку: .content .sidebar;
Избегайте селектора по дочернему элементу: .content > .sidebar и селектора по следующему элементу: .content + .sidebar.

Конечно, селекторы по ID — самые быстрые. Проверить применимость селектора #content к рассматриваемому элементу можно очень быстро. Есть у него этот ID или нет? Селекторы по классу практически такие же быстрые, так как нет никаких связанных элементов, которые надо проверять.

Селекторы по потомкам, такие как .content .sidebar — более ресурсоемкие, так как, чтобы определить надо ли применять правило к .sidebar, браузер должен найти .content. Cелектор по дочернему элементу, например, .content > .sidebar, лучше селектора по потомку, так как браузер должен проверить только один элемент вместо множества. (К сожалению, селекторы + и > не поддерживаются IE6. Так что если его поддержка актуальна для вас, то про них придется забыть — прим. переводчика).

Селектор по тегу и универсальный селектор#

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

Рассмотрим следующий пример:

#content * { color: #039; }

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

И это должно быть сделано для каждого элемента на странице.

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

Почему IE долго не поддерживал `:last-child`#

Все жаловались: у всех браузеров, кроме IE, есть поддержка :last-child (она появилась только в IE9!) Некоторые могли подумать насколько же сложнее сделать :last-child, если уже реализован :first-child?

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

.module > p:first-child { color: red; } /* Первое правило */
.  module > p:last-child { color: blue; } /* Второе правило */

Когда мы рассматриваем внутренности первого <div>, мы видим, что там есть параграф. Браузер видит что-то вроде этого:

<div>
    <p>Lorem Ipsum</p>

Нужно ли применить первое правило к параграфу? Да, это параграф; да, это первый дочерний узел; и, да, это непосредственный потомок элемента с классом module.

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

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

Как на самом деле это делает браузер?#

Я не мог сказать с абсолютной уверенностью, как браузеры парсят :last-child, так что я создал несколько тестов:

Первый пример весьма скучен. В любом браузере, включая IE9, всё отображается корректно. Внутри <div> первый элемент красный, а последний синий. Но посмотрите на второй пример, и вы увидите интересные отличия в поведении браузеров.

Второй пример приостанавливается перед добавлением каждого параграфа в <div>.

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

В Safari, Chrome и Opera мы увидим другой подход. Первый параграф красный. Второй отображается чёрным. Последний параграф отображается чёрным, пока браузер не получит закрывающий тег </div>. В этот момент последний параграф становится синим. Эти браузеры не рассматривают элемент как последний, пока не будет закрыт родительский.

В Internet Explorer 9 Beta я нашел интересный баг. В то время, как статическая страница отображается корректно, версия с паузами отрабатывает с любопытным побочным эффектом. Первый параграф синий, второй параграф синий и затем — третий. Когда закрывающий тег </div> загружен, предпоследний параграф меняет цвет на чёрный. IE9 пытается обрабатывать селектор как WebKit и Opera, но… м-м… не выходит. Надо бы отправить багрепорт в Microsoft.

Почему у нас нет селектора по родителю?#

Уже дано достаточно пояснений, чтобы можно было вернуться к оригинальному вопросу. Проблема не в том, что у нас не может быть селектора по родителю. Проблема в том, что мы столкнемся с проблемами быстродействия, когда дело дойдет до определения того, какие CSS-правила применимы к данному элементу. Если Google Page Speed не рекомендует использование универсальных селекторов, то можно гарантировать, что селектор по родителю будет первым в списке ресурсоемких селекторов, намного опережая все проблемы с производительностью, которые могут быть вызваны использованием универсального селектора.

Давайте посмотрим почему. Первым делом давайте приведём пример синтаксиса для селектора по родителю.

div.module:has(span) { color: green; }

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

Посмотрите на часть нашего документа:

<div>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum <span>Test</span></p>
</div>

Исходя из того, что мы видим, .module будет отображён без использования правила, применяемого селектором по родителю. Когда будет загружен первый элемент <p>, нужно повторно оценить применимость селектора по родителю к <div>. Нужно сделать это снова для следующего параграфа. И снова, для следующего. Наконец, когда

<span> загружен, селектор по родителю будет применен к родительскому <div>, и элемент нужно будет повторно перерисовать.

И что теперь? Теперь, если изменится любое наследуемое CSS-свойство, каждый потомок должен будет повторно анализироваться и перерисовываться. Ох…

Почему проблему можно решить с помощью JavaScript?#

Это только кажется, что JavaScript решает проблему. В общем случае JavaScript-заплатки (заплатки — polyfills — части кода, обеспечивающие функциональность, которую должен обеспечивать браузер — прим. переводчика). Или регрессивное усовершенствование (или как там вы, молодежь, это сейчас называете) запускаются только один раз, после полной загрузки DOM.

Для того чтобы действительно имитировать поведение CSS, любой скрипт, решающий эту проблему, должен запускаться после отображения каждого элемента на странице, чтобы определить, нужно ли применить нашу «заплатку». Помните CSS-expressions в Internet Explorer? Именно по этой причине они вызывали такие проблемы с производительностью.

Не невозможно#

Появится ли когда-нибудь селектор по родителю? Возможно. То, что я описал, не невозможно. На самом деле — наоборот. Это значит только то, что нам придётся иметь дело с ухудшением производительности из-за использования этого селектора.

Довідник по CSS селекторам

active	a:active	Вибірка активного посилання.
adjacent	div + p	Обирає елемент `<p>` який розташовується одразу за елементам `<div>`.
after	p::after	Додає що-небудь після контенту елемента `<p>`
all	*	Обирає всі елементи
attribute	[target]	Обирає всі елементи, у котрих вказано атрибут target. =»https»]	Обирає всі елементи `<a>` в яких значення атрибута href починається з «https».
attribute-value-contain	a[href*=»w3schools»]	Обирає всі посилання в яких атрибут href містить слово «w3schools».
attribute-value-contains	[title~=flower]	Обирає всі елементи з атрибутом title в яких міститься слово flower
attribute-value-end	a[href$=».pdf»]	Обирає всі елементи `<a>` в яких значення атрибута href закінчується рядком «.pdf»
attribute-value-lang	[lang\|=en]	Обирає всі елементи з атрибутом lang значенням якого починається з «en».
before	p::before	Додає що-небудь перед контентом елемента `<p>`
checked	input:checked	Обирає кожний елемент `<input>` який має значенняі checked.
class	.intro	Вибірка всіх елементів з класом «intro».
default	input:default	Обирає елемент введення форми, що без задання.
disabled	input:disabled	Обирає всі вимкнені елементи введення.
element	p	Обирає всі елементи `<p>`.
element-child	div > p	Обирає всі елементи `<p>` для яких батьківським елементом є елемент `<div>`.
empty	p:empty	Обирає кожен елемент `<p>` без тексту та інших HTML елементів.
enabled	input:enabled	Обирає всі увімкнені елементи введення.
first-child	p:first-child	Селектор :first-child обирає всі елементи `<p>`, які є першим нащадком свого батька.
first-letter	p::first-letter	Обирає першу літеру кожного елементу `<p>`.
first-line	p::first-line	Обирає перший рядок кожного елементу `<p>`
first-of-type	p:first-of-type	Обирає елемент `<p>`, якщо він перший елемент свого батька.
focus	input:focus	Обирає елемент `<input>`, який є у фокусі
hover	a:hover	Обирає посилання на яке наведено курсор.
id	#firstname	Вибирає елемент з ідентифікатором
in-range	input:in-range	Обирає елементи `<input>` із значенням, що знаходяться в дозволеному діапазоні.
inside-element	div p	Обирає всі елементи `<p>` в елементі `<div>`
invalid	input:invalid	Обирає всі елементи input зі значенням, що не пройшло перевірки.
lang	p:lang(it)	Обирає кожен елемент `<p>` з атрибутом lang у значенні «it» (Italian)
last-child	p:last-child	Обирає елемент `<p>`, який є останнім нащадком свого батька.
last-of-type	p:last-of-type	Обирає останній елемент свого батька.
link	a:link	Обирає всі посилання по яким ще не переходили.
multielement	div, p	Обирає всі елементи `<div>` і всі елементи `<p>`.
not	:not(p)	Вибірка елементів, котрі не містять вказаний селектор.
nth-child	p:nth-child(2)	Обирає елемент `<p>`, якщо він другий елемент свого батька.
nth-last-child	p:nth-last-child(2)	Обирає кожен елемент `<p>`, що є другим нащадком свого батька починаючи відлік з кінця.
nth-last-of-type	p:nth-last-of-type(2)	Обирає кожен елемент `<p>`, що є другим елементом `<p>` свого батька з кінця.
nth-of-type	p:nth-of-type(2)	Вибирає кожен елемент `<p>`, що є другим `<p>` елемент свого батька.
only-child	p:only-child	Вибирає елемент `<p>`, якщо він є єдиним нащадком свого батька.
only-of-type	p:only-of-type	Обирає кожен елемент `<p>`, що є єдиним елементом `<p>` такого типу свого батька.
optional	input:optional	Вибірка елементів `<input>`, що без атрибута «required».
out-of-range	input:out-of-range	Вибірка всіх `<input>` елементів у котрих введене значення вийшло за межі дозволеного діапазону.
placeholder	input[type=»text»]::placeholder	Змінює стиль підсказки текстового поля `<input>`.!
read-only	input:read-only	Обирає `<input>` елементи, котрі з атрибутом «readonly».
read-write	input:read-write	Вибирає `<input>` елементи у яких не вказаний «readonly» атрибут.
required	input:required	Вибірка елементів `<input>`, що обов’язкові для заповнення.
root	:root	Вибирає кореневий елемент документа
selection	::selection	Вибірка виділеного користувачем тексту.
sibling	p ~ ul	Обирає всі елементи `<ul>` які розташовані перед елементом `<p>`
target	#news:target	Обирає поточний активний елемент, що має значення атрибута
valid	input:valid	Обирає всі елементи введення з допустим значенням.
visited	a:visited	Обирає посилання, по яким вже було здійснено перехід

родственные селекторы «~» (тильда), описание и примеры.

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

Давайте на простом примере разберём работу этого селектора:

<!DOCTYPE html>
<html>
<head>
        <title>Селектор родственного элемента в CSS</title>
<style>
        h2~p { color: red; }
</style>
</head>
<body>
<h2>Привет!</h2>
<p>Текст абзаца №1 в про невероятные приключения.</p>
<p>Текст абзаца №2 в про невероятные приключения.</p>
<div>Текст div №1 в про невероятные приключения.</div>
<p>Текст абзаца №3 в про невероятные приключения.</p>
</body>
</html>

В этом примере родственный селектор h2~p сработал на все теги <p>, следующие за тегом <h2>.

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

<!DOCTYPE html>
<html>
<head>
        <title>Селектор родственного элемента в CSS</title>
<style>
        h2~p { color: red; }
</style>
</head>
<body>
<div>
<h2>Привет!</h2>
<p>Текст абзаца №1 в про невероятные приключения.</p>
<p>Текст абзаца №2 в про невероятные приключения.</p>
</div>
<div>Текст div №1 в про невероятные приключения.</div>
<p>Текст абзаца №3 в про невероятные приключения.</p>
</body>
</html>

Тут видно, что стиль сработает только для тегов <p>, которые являются потомками тега <div>, то есть для абзаца №1 и №2.

То есть родственные элементы должны иметь общего родителя и находиться на одном уровне.

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

Pодственный селектор и псевдокласс :hover

Теперь давайте используем этот селектор в паре с псевдоклассом :hover, который отвечает за стиль элемента, на который наведен курсор.

<!DOCTYPE html>
<html>
<head>
        <title>Селектор родственного элемента в CSS</title>
<style>
	div {
		width: 40px;
		height: 40px;
	}
	p:hover~div { background-color: red; }
</style>
</head>
<body>
<p>Наведи сюда курсор.</p>
<div></div>
+
<div></div>
</body>
</html>

Результат будет таким:

Рисунок 1. Родственные селекторы и :hover.

Более реальный и сложный пример

Сейчас мы рассмотрим немного сложный пример, если вы только начали изучение CSS, то вам может он показаться непонятным. Для понимания его работы нужно знать некоторые данные из CSS, которых вы, возможно, ешё не знаете. В таком случае пока просто пропустите его, вернётесь к нему позже.

Давайте рассмотрим код формы, в которой при активации поля формы появляется подсказка. Вот так она выглядит:

Рисунок 2. Поле формы с подсказкой.

Если поместить курсор в поле «Имя пользователя», то появится одна подсказка, если в поле «Пароль», то другая.

<!DOCTYPE html>
<html>
<head>
        <title>Селектор родственного элемента в CSS</title>
<style>
div.left, div.right{
    padding: 7px;
    margin: 3px;
}
div.left{
    position: relative;
    width: 370px;
    text-align: right;
}
div.right{
    display: none;
    position: absolute;
    top: -4px; left: 382px;
    width: 130px;
    border: 1px solid cornflowerblue;
    text-align: left;
    font-size: 90%;
    border-radius: 5px;
}
div.triangle-before{
    display: none;
    position: absolute;
    top: 12px; left: 378px;
    width: 0; height: 0px;
    border-right: 7px solid cornflowerblue;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
div. triangle-after{
    display: none;
    position: absolute;
    top: 12px; left: 379px;
    width: 0; height: 0px;
    border-right: 7px solid white;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
input:focus ~ div{
    display: block;
}
</style>
</head>
<body>

<div>
Имя пользователя:
<input name="username">
<div>7 символов - не использовать спецсимволы.</div>
<div></div>
<div></div>
</div>

<div>
Пароль:
<input name="password">
<div>4-15 символов - не использовать спецсимволы.</div>
<div></div>
<div></div>
</div>

</body>
</html>

Для определения стиля появляющегося блока тут использован селектор input:focus ~ div. Он значит следующее: когда поле формы input получает фокус, всем родственным тегам div применить стиль: display: block, то есть они становятся видимыми. До этого они имели свойство display: none, то есть были невидимы.

Сама подсказка состоит из трёх блоков div:

в одном блоке хранится текст подсказки, он обведён рамкой с закруглёнными углами;
треугольник, блок с нолевой высотой и шириной, а также рамками border, которые рисуют треугольник;
ешё один треугольник, но белого цвета и смещён на 1px в право (этот треугольник закрашивает предыдущий, оставляя лишь боковую линию в 1 px).

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

Как выбрать все дочерние элементы рекурсивно с помощью CSS?

Дочерний селектор соответствует, когда элемент является дочерним по отношению к некоторому элементу. Дочерний селектор состоит из двух или более селекторов, разделенных знаком «>». Он также известен как селектор элемент> элемент. Он выбирает все элементы определенного родителя.

Синтаксис:

Пример 1: В этом примере выбирается весь дочерний элемент.

< html >

< Головка >

< титул >

Селектор дочерних элементов

титул >

< стиль >

div> p {

цвет фона: зеленый;

}

стиль >

головка >

< корпус >

< дел >

< p > Пункт 1 p >

< p > Параграф 2 p >

< пролет >

< p > Пункт 3 p >

пролет >

div >

< p > Пункт 4 p >

< p > Пункт 5 p >

корпус >

html >

Выход:

Пример 2: В этом примере рекурсивно выбираются все дочерние элементы.

< html >

< Головка >

< титул >

Селектор дочерних элементов

титул >

< стиль >

дел.GFG> * {

цвет фона: зеленый;

}

стиль >

Селекторы CSS Child vs Descendant

< html >

< Головка >

< титул >

Селектор дочерних элементов CSS

титул >

< стиль >

div> p {

цвет: белый;

фон: зеленый;

отступ: 2 пикселя;

}

стиль >

Головка >

< body style = "text-align: center;" >

< дел >

< h3 стиль = "цвет: зеленый;" >

Селектор дочерних элементов CSS

h3 >

< p >

Портал информатики для гиков.

p >

div >

< p > Geeks Classes - это быстрый курс для изучения

вопросов по алгоритмам. p >

< p > Этот абзац не будет стилизован. п. >

корпус >

html >

`CSS: селектор только-потомков`

Это руководство по CSS объясняет, как использовать селектор CSS под названием : only-child с синтаксисом и примерами.

`Описание`

Селектор CSS: only-child позволяет вам выбрать элемент, который является единственным дочерним элементом в пределах своего родителя.

`Синтаксис`

Синтаксис CSS-селектора: only-child:

  элемент: only-child {style_properties}

`Параметры или аргументы`

элемент: Единственный дочерний элемент этого типа элемента в его родительском элементе.
style_properties: Стили CSS, применяемые к единственному дочернему элементу.

`Совместимость с браузером`

Селектор CSS: only-child имеет базовую поддержку в следующих браузерах:

Хром
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer 9+ (IE 9+)
IE Телефон 9+
Opera 9.5+
Opera Mobile 10+
Safari (WebKit)
Safari Mobile

`Пример`

Мы обсудим селектор: only-child ниже, исследуя примеры того, как использовать этот селектор в CSS для применения стиля к единственному дочернему элементу.

`С тегом`

Давайте посмотрим на пример CSS: only-child, в котором мы применяем селектор: only-child к тегу .

CSS будет выглядеть так:

  диапазон: только ребенок {цвет: красный; размер шрифта: 22 пикселя; }

HTML будет выглядеть так:

  
   Вот 2 сайта  techonthenet.com  и  checkyourmath.com . 
   Здесь всего 1 сайт  bigactivities.com .

Результат будет выглядеть следующим образом (селектор: only-child будет стилизовать теги следующим образом):

В этом примере CSS: only-child первый тег

содержит более одного тега , поэтому эти теги не стилизованы с помощью селектора: only-child.Второй тег

содержит только один тег , поэтому он будет стилизован селектором: only-child. Цвет текста в этом теге диапазона bigactivities.com будет отображаться крупным красным шрифтом.

`С тегом`

Давайте посмотрим на пример CSS: only-child, в котором мы применяем селектор: only-child к тегу

.

CSS будет выглядеть так:

  p: only-child {background: yellow; }

HTML будет выглядеть так:

  
   TechOnTheNet.com предоставляет полезные справочные материалы, инструкции и ответы на часто задаваемые вопросы с 2003 года. Мы ориентируемся на такие технологии, как Microsoft Access, Microsoft Excel, Microsoft Word, SQL, Oracle / PLSQL, MySQL, HTML, CSS и язык C. 


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

Результат будет выглядеть следующим образом (селектор: only_child стилизует теги

следующим образом):

В этом примере CSS: only-child первый тег

 содержит только один тег, поэтому он будет стилизован селектором: only-child, задающим цвет фона в пределах 
 Это единственный абзац в этот div
  отображается желтым цветом. Второй тег содержит более одного тега, поэтому эти теги
 не стилизованы селектором: only-child.
 CSS: селектор последнего дочернего элемента 
 В этом руководстве по CSS объясняется, как использовать селектор CSS под названием : last-child  с синтаксисом и примерами.
 Описание 
 Селектор CSS: last-child позволяет вам выбрать элемент, который является последним дочерним элементом в пределах своего родителя.
 Синтаксис 
 Синтаксис CSS-селектора: active:
  элемент: last-child {style_properties}  
 Параметры или аргументы 
 элемент
 Последний элемент этого типа в родительском элементе.
 style_properties
 Стили CSS, применяемые к последнему дочернему элементу.
 Совместимость с браузером 
 Селектор CSS: last-child имеет базовую поддержку в следующих браузерах:
 Хром
 Android
 Firefox (Gecko)
 Firefox Mobile (Gecko)
 Internet Explorer 7+ (IE 7+)
 IE Телефон 7+
 Opera 9. 5+
 Opera Mobile 10+
 Safari (WebKit)
 Safari Mobile
 Пример 
 Мы обсудим селектор: last-child ниже, исследуя примеры того, как использовать этот селектор в CSS для применения стиля к последнему элементу.
 С тегом  
 Давайте посмотрим на пример CSS: last-child, в котором мы применяем селектор: last-child к тегу .
 CSS будет выглядеть так:
  диапазон: последний ребенок {цвет: красный; font-weight: жирный; }  
 HTML будет выглядеть так:
  
   Вот 2 сайта:  techonthenet.com  и  checkyourmath.com . 
  
 Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги  следующим образом):
 В этом примере CSS: last-child текст "checkyourmath.com ", находящийся в последнем теге , будет отображаться как красный жирный текст. Текст в первом теге  не будет стилизован селектором: last-child.
 С тегом 
 Давайте посмотрим на пример CSS: last-child, в котором мы применяем селектор: last-child к тегу
.
 CSS будет выглядеть так:
  p: last-child {цвет: синий; }  
 HTML будет выглядеть так:
  
   Это первый абзац, написанный techonthenet.com. 
   Это последний абзац, написанный techonthenet.com. 
  
 Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги
 следующим образом):
 В этом примере CSS: last-child цвет текста в последнем теге
 будет синим. Первый тег
 не будет стилизован селектором: last-child.
 С тегом 
 Давайте посмотрим на пример CSS: last-child, в котором мы применяем селектор: last-child к тегу.
 CSS будет выглядеть так:
  tr: last-child {background: yellow; }  
 HTML будет выглядеть так:
  <таблица>
  
     Заголовок столбца 1 
     Заголовок столбца 2 
  
  
     techonthenet. com 
     Технический справочный сайт 
  
  
     checkyourmath.com 
     Сайт математических вычислений 
  
  
     bigactivities.com 
     Детский сайт 
  
  
 Результат будет выглядеть следующим образом (селектор: last-child будет стилизовать теги следующим образом):
 В этом примере CSS: last-child последняя строка (т.е. последний тег) будет иметь желтый цвет фона. Все остальные строки в таблице не будут стилизованы селектором: last-child.
 сложных селекторов - научитесь кодировать расширенный HTML и CSS 
 Урок 3 
 В этом уроке
3 
 CSS 
 Поделиться 
 Селекторы - одна из самых важных частей CSS.Они формируют каскад и определяют, как стили должны применяться к элементам на странице.
 До недавнего времени CSS никогда не касался селекторов. Время от времени в спецификации селекторов вносились инкрементальные обновления, но никогда не было никаких серьезных новаторских улучшений. К счастью, в последнее время селекторам стало уделяться больше внимания, чтобы посмотреть, как выбирать различные типы элементов и элементов в разных состояниях использования.
 CSS3 принес новые селекторы, открыв целый новый мир возможностей и улучшений существующих практик.Здесь мы обсудим селекторы, старые и новые, и обсудим, как их лучше всего использовать.
 Общие селекторы 
 Прежде чем углубляться в некоторые из более сложных селекторов, и те, что предлагаются в CSS3, давайте кратко рассмотрим некоторые из наиболее распространенных селекторов, которые встречаются сегодня. Эти селекторы включают селекторы типа, класса и идентификатора.
 Селектор  типа  идентифицирует элемент на основе его типа, в частности того, как этот элемент объявлен в HTML. Селектор  class  идентифицирует элемент на основе значения его атрибута класса, который может быть повторно использован для нескольких элементов по мере необходимости, чтобы помочь совместно использовать популярные стили. Наконец, селектор  ID  идентифицирует элемент на основе значения его атрибута ID, который является уникальным и должен использоваться только один раз на странице.
 CSS 
       1
2
3
4  h2 {...}
.tagline {...}
#вступление {...}
 
  
 HTML 
       1
2
3
4
5  <раздел>
    ...  
   ...  

 
  
 Обзор общих селекторов 
 Пример  Классификация  Пояснение
  h2  Выбор типа  Выбирает элемент по его типу
 . Бирка  Селектор класса  Выбирает элемент по значению атрибута класса, который может использоваться многократно на странице
  #intro  Селектор идентификатора  Выбирает элемент по значению атрибута ID, который является уникальным и должен использоваться только один раз на странице
 Дочерние селекторы 
 Дочерние селекторы позволяют выбирать элементы, которые попадают друг в друга, что делает их дочерними по отношению к родительскому элементу. Этот выбор может быть сделан двумя разными способами, с использованием потомков или прямых дочерних селекторов.
 Селектор потомков 
 Самый распространенный дочерний селектор - это селектор потомков, который соответствует каждому элементу, следующему за идентифицированным предком. Элемент-потомок не обязательно должен идти непосредственно после элемента-предка внутри дерева документа, например, в отношении родительско-дочерних отношений, но может располагаться в любом месте внутри элемента-предка. Селекторы-потомки создаются путем разделения элементов внутри селектора, создавая новый уровень иерархии для каждого списка элементов.
 Селектор  article h3  является селектором-потомком, выбирая только элементы  h3 , которые попадают внутрь элемента  article . Обратите внимание, где бы ни находился элемент  h3 , пока он находится внутри элемента  article , он всегда будет выбран. Кроме того, любой элемент  h3  за пределами элемента  article  не выбирается.
 Ниже выделены заголовки в строках 3 и 5.
 CSS 
  
 HTML 
       1
2
3
4
5
6
7
8   ...  
<статья>
    Этот заголовок будет выбран  
  
      Этот заголовок будет выбран  
  

 
  
 Прямой дочерний селектор 
 Иногда селекторы-потомки заходят слишком далеко, выбирая больше, чем ожидалось. Иногда нужно выбирать только прямых потомков родительского элемента, а не каждый экземпляр элемента, глубоко вложенного внутри предка. В этом случае можно использовать прямой дочерний селектор, поместив знак «больше», > , между родительским элементом и дочерним элементом внутри селектора.
 Например,  article> p  является прямым дочерним селектором, определяющим только элементы  p , которые попадают непосредственно в элемент  article . Любой элемент  p , размещенный вне элемента  article  или вложенный внутри другого элемента, кроме элемента  article , не будет выбран.
 Ниже абзац в строке 3 является единственным прямым дочерним элементом родительской статьи, выбранной таким образом.
 CSS 
  
 HTML 
       1
2
3
4
5
6
7
8  ... 
<статья>
   Этот абзац будет выбран 
  
     ... 
  

 
  
 Обзор дочерних селекторов 
 Пример  Классификация  Пояснение
  артикул h3  Селектор потомков  Выбирает элемент, который находится где угодно в пределах идентифицированного элемента-предка
  артикул> p  Прямой дочерний селектор  Выбирает элемент, который находится непосредственно внутри идентифицированного родительского элемента
 Селекторы братьев и сестер 
 Знание того, как выбирать дочерние элементы элемента, в значительной степени полезно и довольно часто встречается. Однако может потребоваться выбрать элементы-близнецы, те элементы, которые имеют общего родителя. Эти одноуровневые выборы могут быть сделаны с помощью общих одноуровневых и смежных одноуровневых селекторов.
 General Sibling Selector 
 Общий селектор родственных элементов позволяет выбирать элементы на основе их родственных элементов, которые имеют одного и того же общего родителя. Они создаются с помощью символа тильды  ~  между двумя элементами в селекторе. Первый элемент определяет, с чем должен быть родственный второй элемент, и оба должны иметь одного и того же родителя.
 Селектор  h3 ~ p  - это общий селектор-брат, который ищет элементы  p , которые следуют за любыми элементами  h3  и имеют одного и того же родителя. Чтобы выбрать элемент  p , он должен стоять после любого элемента  h3 .
 Абзацы в строках 5 и 9 выбираются, поскольку они идут после заголовка в дереве документа и имеют тот же родительский элемент, что и их родственный заголовок.
 CSS 
  
 HTML 
       1
2
3
4
5
6
7
8
9
10
11  ... 
<раздел>
   ... 
    ...  
   Этот абзац будет выбран 
  
     ... 
  
   Этот абзац будет выбран 

 
  
 Селектор соседних братьев и сестер 
 Иногда может потребоваться немного больше контроля, включая возможность выбора одноуровневого элемента, который следует непосредственно за другим одноуровневым элементом, то есть там, где входит соседний одноуровневый элемент.Соседний одноуровневый селектор будет выбирать только одноуровневые элементы, следующие непосредственно за другим одноуровневым элементом. Вместо использования символа тильды, как в обычных селекторах, соседний селектор использует знак плюса,  + , между двумя элементами внутри селектора. Опять же, первый элемент определяет, что будет направлять второй элемент.
 Селекторы 
 Селекторы
 В CSS правила сопоставления с образцом определяют, какие правила стиля применяются к
элементы в документе
дерево.Эти шаблоны, называемые селекторами, могут варьироваться от простых имен элементов
к богатым контекстным шаблонам. Если все условия в шаблоне верны
для определенного элемента селектор  соответствует  элементу.
 Чувствительность к регистру имен элементов языка документа в
селекторы зависят от языка документа. Например, в HTML
имена элементов нечувствительны к регистру, но в XML они
деликатный случай.
 В следующей таблице обобщен синтаксис селектора CSS 2.1:
 Шаблон  Значение  Описано в разделе
 *  Соответствует любому элементу.  Универсальный
selector
 E  Соответствует любому элементу E (т. е. элементу типа E).  Тип
селекторы
 E F  Соответствует любому элементу F, который является потомком
элемент E.  Потомок
селекторы
 E> F  Соответствует любому элементу F, который является дочерним элементом
элемент E.  Дочерние селекторы
 E: first-child  Соответствует элементу E, когда E является первым
дочерний элемент своего родителя.  Псевдокласс: first-child
 E: ссылка 
 E: посещенный  Соответствует элементу E, если E является источником
привязка гиперссылки, цель которой еще не посещалась (: ссылка)
или уже посещал (: посетил).  Псевдоклассы ссылки
 E: active 
 E: hover 
 E: focus  Соответствует E во время определенных
действия пользователя.  Динамические псевдоклассы
 E: lang (c)  Соответствует элементу типа E, если он на (человеческом) языке c
(язык документа указывает, как определяется язык).  Псевдокласс: lang ()
 E + F  Соответствует любому элементу F, которому непосредственно предшествует
родственный элемент E.  Смежные селекторы
 E [foo]  Соответствует любому элементу E с
Установлен атрибут "foo" (независимо от его значения).  Селекторы атрибутов
 E [foo = "warning"]  Соответствует любому элементу E,
Значение атрибута "foo" в точности равно значению "warning".  Селекторы атрибутов
 E [foo ~ = "warning"]  Соответствует любому элементу E,
Значение атрибута "foo" представляет собой список значений, разделенных пробелами, одно из
что в точности равно "предупреждению".  Селекторы атрибутов
 E [lang | = "en"]  Соответствует любому элементу E,
Атрибут "lang" содержит список значений, разделенных дефисами.
начиная (слева) с "en".  Селекторы атрибутов
 DIV.warning   Зависит от языка.  (в HTML то же
как DIV [class ~ = "warning"].)  Селекторы классов
 E # myid  Соответствует любому элементу E с идентификатором
равно «myid».  Селекторы ID
 Простой селектор   либо
сразу за ним следует селектор типа или универсальный селектор
по нулю или более атрибутов
селекторы, селекторы идентификаторов или псевдоклассы в любом порядке.Простой
селектор соответствует, если все его компоненты совпадают.
 Примечание: терминология, используемая здесь в CSS 2.1,
отличается от того, что используется в CSS3. Например, «простой селектор»
относится к меньшей части селектора в CSS3, чем в CSS 2.1.
См. Модуль CSS3 Selectors [CSS3SEL].
 Селектор   представляет собой цепочку из одного или нескольких
простые селекторы, разделенные комбинаторами.  Комбинаторы : белое пространство,
«>» и «+». Между комбинатором и
простые селекторы вокруг него.
 Элементы дерева документа, соответствующие селектору, называются  предмет  селектора.
Селектор, состоящий из одного простого селектора, соответствует любому элементу
удовлетворяя его требования. Добавляем простой селектор и
комбинатор в цепочку накладывает дополнительные ограничения согласования, поэтому
субъекты селектора всегда являются подмножеством элементов, соответствующих
последний простой селектор.
 Можно добавить один псевдоэлемент
до последнего простого селектора в цепочке, и в этом случае стиль
информация относится к подразделу каждого предмета.
 5.2.1 Группировка 
 Когда несколько селекторов используют одни и те же объявления, они могут быть
сгруппированы в список, разделенный запятыми.
 Пример (ы):
 В этом примере мы объединяем три правила с одинаковыми объявлениями
в один. Таким образом,
h2 {font-family: sans-serif}
h3 {font-family: sans-serif}
h4 {font-family: sans-serif}
 
 эквивалентно:
h2, h3, h4 {font-family: sans-serif}
 
 CSS также предлагает другие "сокращенные" механизмы, включая  несколько объявлений
и сокращенные свойства.
 Универсальный
селектор, написанный "*", соответствует имени любого элемента
тип. Он соответствует любому отдельному элементу в дереве документа.
 Если универсальный селектор - не единственный компонент простого селектора, "*" может быть
опущено. Например:
  * [lang = fr]  и  [lang = fr]  эквивалентны.
  * .warning  и  .warning  эквивалентны.
  * # myid  и  #myid  эквивалентны.
 Тип  A
селектор  совпадает с именем элемента языка документа
тип. Селектор типа соответствует каждому экземпляру типа элемента в
дерево документа.
 Пример (ы):
 Следующее правило соответствует всем элементам h2 в
дерево документов:
h2 {font-family: sans-serif}
 
 Иногда авторы могут захотеть, чтобы селекторы соответствовали элементу, который
потомок другого элемента в дереве документа (например, "Соответствие
те элементы EM, которые содержатся в элементе h2 ").Потомок
селекторы выражают такую взаимосвязь в шаблоне. А
селектор потомков состоит из двух или более селекторов, разделенных
белое пространство. Потомок
селектор вида " A B " соответствует, когда элемент  B  является произвольным потомком некоторого элемента-предка  A .
 Пример (ы):
 Например, рассмотрим следующие правила:
h2 {цвет: красный}
эм {цвет: красный}
 
 Хотя эти правила предназначены для добавления акцента к тексту с помощью
изменяя его цвет, эффект будет потерян в случае, например:
  Этот заголовок  очень  важен  
 
 Мы рассмотрим этот случай, дополнив предыдущие правила
правило, устанавливающее синий цвет текста всякий раз, когда где-либо встречается EM
в пределах h2:
h2 {цвет: красный}
эм {цвет: красный}
h2 em {цвет: синий}
 
 Третье правило будет соответствовать EM в следующем фрагменте:
 Этот заголовок 
 очень  важно  
 
 Пример (ы):
 Следующий селектор:
div * p
 
 соответствует элементу P, который является внуком или более поздним потомком
Элемент DIV. Обратите внимание, что пробелы по обе стороны от "*" не являются частью
универсального селектора; белое пространство - комбинатор
указание
что DIV должен быть предком некоторого элемента, и что
элемент должен быть предком P.
 Пример (ы):
 Селектор в следующем правиле, который объединяет
селекторы потомков и атрибутов,
соответствует любому элементу, у которого (1) установлен атрибут "href" и
(2) находится внутри P, который сам находится внутри DIV:
div p * [href]
 
 А  ребенок
селектор  совпадает, когда элемент является дочерним по отношению к некоторому элементу.Ребенок
Селектор состоит из двух или более селекторов, разделенных знаком «>».
 Пример (ы):
 Следующее правило устанавливает стиль всех элементов P, которые
являются детьми BODY:
body> P {высота строки: 1.3}
 
 Пример (ы):
 В следующем примере комбинируются селекторы потомков и дочерние селекторы:
div ol> li p
 
 Соответствует элементу P, который является потомком LI; элемент LI
должен быть дочерним элементом элемента OL; элемент OL должен быть
потомок DIV. Обратите внимание, что необязательное пустое пространство вокруг
комбинатор ">" опущен.
 Для получения информации о выборе первого дочернего элемента элемента, пожалуйста,
см. раздел о: first-child
псевдокласс ниже.
 Соседние одноуровневые селекторы имеют следующий синтаксис: E1 + E2,
где E2 - предмет селектора. Селектор соответствует, если E1
и E2 имеют одного и того же родителя в дереве документа, а E1 сразу
предшествует E2,
игнорирование неэлементных узлов (таких как текстовые узлы и комментарии).
 Пример (ы):
 Таким образом, следующее правило гласит, что когда элемент P сразу
следует за элементом MATH, он не должен иметь отступ:
math + p {text-indent: 0}
 
 Следующий пример уменьшает вертикальное пространство, разделяющее
h2 и h3, которое следует сразу за ним:
h2 + h3 {margin-top: -5 мм}
 
 Пример (ы):
 Следующее правило аналогично тому, что было в предыдущем примере,
за исключением того, что он добавляет селектор класса. Таким образом, только специальное форматирование
происходит, когда h2 имеет  class = "opener" :
h2.opener + h3 {margin-top: -5 мм}
 
 CSS 2.1 позволяет авторам определять правила, соответствующие элементам
которые имеют определенные атрибуты
в исходном документе.
 5.8.1 Соответствие атрибутов и значений атрибутов 
 Селекторы атрибутов могут совпадать четырьмя способами:
  [att] 
 Соответствует, когда элемент устанавливает атрибут "att", независимо от того,
значение атрибута.
  [att = val] 
 Соответствует, когда значение атрибута att элемента точно равно val.
  [att ~ = val] 
 Представляет элемент с атрибутом  att , чей
значение - это список слов, разделенных пробелами, одно из которых точно
"вал". Если "val" содержит пробел, он никогда ничего не будет представлять.
(так как слов  разделены пробелами).
Если "val" - пустая строка, она также никогда ничего не будет представлять.
  [att | = val] 
 Представляет элемент с атрибутом  att , его
значение либо в точности равно "val", либо сразу начинается с "val"
за которым следует "-" (U + 002D). Это в первую очередь предназначено для разрешения языкового субкода
совпадений (например, атрибут  hreflang  на  элемент  в HTML), как описано в BCP 47
([BCP47]) или его преемник. Для  lang  (или  xml: lang ) сопоставление подкода языка, см. Псевдокласс : lang .
 Значения атрибутов должны быть идентификаторами или строками. В
чувствительность к регистру имен атрибутов и значений в селекторах зависит от
язык документа.
 Пример (ы):
 Например, следующий селектор атрибутов
соответствует всем элементам h2, которые указывают атрибут "title",
независимо от его стоимости:
h2 [название] {цвет: синий; }
 
 Пример (ы):
 В следующем примере селектор соответствует всем элементам SPAN, чьи
Атрибут "class" имеет в точности значение "example":
диапазон [класс = пример] {цвет: синий; }
 
 Селекторы нескольких атрибутов могут использоваться для ссылки на несколько
атрибуты элемента или даже несколько раз к одному и тому же атрибуту.
 Пример (ы):
 Здесь селектор соответствует всем элементам SPAN, чьи
Атрибут "hello" имеет в точности значение "Кливленд" и чей
Атрибут "до свидания" имеет в точности значение "Колумб":
span [hello = "Cleveland"] [goodbye = "Columbus"] {цвет: синий; }
 
 Пример (ы):
 Следующие селекторы иллюстрируют разницу между «=» и «~ =».
Первый селектор будет соответствовать, например, значению
"copyright copyleft copyeditor" для атрибута "rel".Второй
селектор будет соответствовать только тогда, когда атрибут "href" имеет значение
"http://www.w3.org/".
a [rel ~ = "copyright"]
a [href = "http://www.w3.org/"]
 
 Пример (ы):
 Следующее правило скрывает все элементы, для которых значение
Атрибут "lang" равен "fr" (т. е. язык французский).
* [lang = fr] {display: none}
 
 Пример (ы):
 Следующее правило будет соответствовать значениям атрибута "lang"
начинающиеся с "en", включая "en", "en-US" и "en-cockney":
* [lang | = "ru"] {цвет: красный}
 
 Пример (ы):
 Точно так же следующие правила звуковой таблицы стилей позволяют сценарию
для чтения вслух разными голосами для каждой роли:
ДИАЛОГ [персонаж = ромео]
     {voice-family: "Laurence Olivier", charles, мужской}
      
ДИАЛОГ [персонаж = Джульетта]
     {voice-family: "Вивьен Ли", Виктория, женщина}
 
 5. 8.2 Значения атрибутов по умолчанию в DTD 
 Сопоставление происходит по значениям атрибутов в дереве документа.
Значения атрибутов по умолчанию могут быть определены в DTD или в другом месте, но не всегда могут быть выбраны
селекторы атрибутов. Таблицы стилей должны быть разработаны так, чтобы они работали
даже если значения по умолчанию не включены в дерево документа.
 Точнее, UA может, но  не требуется , читать "внешний
подмножество "DTD, но  - это , необходимое для поиска по умолчанию
значения атрибутов во внутреннем подмножестве документа."(См. [XML10]
для определений этих подмножеств.)
В зависимости от UA значение атрибута по умолчанию, определенное во внешнем
подмножество DTD могло появиться или не появиться в дереве документа.
 UA, который распознает пространство имен XML [XMLNAMESPACES], может, но не
требуется, использовать свои знания об этом пространстве имен для обработки по умолчанию
значения атрибутов, как если бы они присутствовали в документе. (Например,
XHTML UA не требуется использовать встроенные знания XHTML.
DTD.)
 Обратите внимание, что обычно реализации предпочитают игнорировать
внешние подмножества.
 Пример (ы):
 Пример:
 Например, рассмотрим элемент EXAMPLE с атрибутом "notation"
который имеет значение по умолчанию "десятичное". Фрагмент DTD может быть

 
 Если таблица стилей содержит правила
ПРИМЕР [notation = decimal] {/ * ... настройки свойств по умолчанию ... * /}
ПРИМЕР [notation = octal] {/ * ... другие настройки ... * /}
 
 первое правило может не соответствовать элементам, чей атрибут "notation"
установлено по умолчанию, т.е.е., явно не задано. Чтобы поймать все случаи,
селектор атрибутов для значения по умолчанию должен быть удален:
ПРИМЕР {/ * ... настройки свойств по умолчанию ... * /}
ПРИМЕР [notation = octal] {/ * ... другие настройки ... * /}
 
 Здесь, поскольку селектор  ПРИМЕР [обозначение = восьмеричное]  является
более конкретный, чем тип
только селектор, объявления стиля во втором правиле переопределят
те, что в первом для элементов, которые имеют значение атрибута "нотация"
из «восьмеричного». Необходимо следить за тем, чтобы все объявления о собственности,
применяются только к случаю по умолчанию, отменяются в нестандартном
правила стиля кейсов.
 5.8.3 Селекторы классов 
 Работая с HTML, авторы могут использовать точку (. )
обозначение как альтернатива обозначению  ~ = , когда
представляющий атрибут  класса . Таким образом, для HTML  div.value  и  div [class ~ = value]  имеют
такое же значение. Значение атрибута должно сразу следовать за
"период" (.). UA могут применять селекторы, используя
точка (.) в XML-документах, если UA имеет специфичное пространство имен
знания, позволяющие определить, какой атрибут
Атрибут "class" для соответствующего пространства имен. Один такой
Примером специфических знаний о пространстве имен является проза в
спецификация для конкретного пространства имен (например, SVG 1.1 [SVG11]
описывает SVG
атрибут "class" и то, как UA должен его интерпретировать, и
аналогично MathML 3. 0 [MATh40] описывает MathML
атрибут "класс".)
 Пример (ы):
 Например, мы можем назначить информацию о стиле всем элементам с помощью  class ~ = "pastoral"  следующим образом:
*.pastoral {color: green} / * все элементы с классом ~ = pastoral * /
 
или просто.pastoral {color: green} / * все элементы с классом ~ = pastoral * /
 
 Следующее назначает стиль только элементам h2 с  class ~ = "pastoral" :
h2.pastoral {color: green} / * элементы h2 с классом ~ = pastoral * /
 
 Согласно этим правилам, первый экземпляр h2 ниже не будет иметь зеленого
текст, а второй:
  Не зеленый  
  Очень зеленый  
 
 Чтобы соответствовать подмножеству значений "класса", каждое значение должно предшествовать
пользователем ".".
 Пример (ы):
 Например, следующее правило соответствует любому элементу P, атрибут "class" которого
был назначен список значений, разделенных пробелами, который включает "пастырское"
и «морской»:
p. marine.pastoral {цвет: зеленый}
 
 Это правило соответствует, если  class = "пасторально-голубой морской
marine ", но не соответствует  class =" pastoral "
синий ".
   Примечание.  CSS дает так много
сила атрибута "класс", которую авторы могли предположить
собственный «язык документа», основанный на элементах, почти не имеющих
связанное представление (например, DIV и SPAN в HTML) и присвоение
информация о стиле через атрибут "class".Авторам следует избегать
эта практика, поскольку структурные элементы языка документа
часто имеют признанные и принятые значения, а классы, определенные автором, могут
не. 
   Примечание:  Если элемент имеет
несколько атрибутов класса, их значения должны быть объединены с
пробелы между значениями перед поиском класса. С этого момента
время, когда рабочая группа не знает, каким образом это
ситуация может быть достигнута, поэтому это поведение явно
ненормативный в данной спецификации. 
 Языки документов могут содержать атрибуты, объявленные как
типа ID. Атрибуты типа ID особенными делает то, что нет двух
такие атрибуты могут иметь одинаковое значение; какой бы документ
язык, атрибут ID может использоваться для однозначной идентификации его
элемент. В HTML все атрибуты ID называются "id"; XML
приложения могут называть атрибуты идентификатора по-разному, но
действует такое же ограничение.
 Атрибут ID языка документа позволяет авторам назначать
идентификатор одного экземпляра элемента в дереве документа.CSS ID
селекторы соответствуют экземпляру элемента на основе его идентификатора. CSS
Селектор идентификатора содержит знак "#", сразу за которым следует идентификатор.
значение, которое должно быть идентификатором.
 Обратите внимание, что CSS не указывает, как UA узнает идентификатор.
атрибут элемента. UA может, например, прочитать DTD документа, иметь
информация жестко закодирована или спросить пользователя.
 Пример (ы):
 Следующий селектор идентификатора соответствует элементу h2, идентификатор которого
атрибут имеет значение "chapter1":
h2 # chapter1 {выравнивание текста: центр}
 
 В следующем примере правило стиля соответствует
элемент, имеющий значение идентификатора "z98y". Таким образом, правило будет соответствовать элементу P:
<ГОЛОВА>
   Соответствие P 
  

<ТЕЛО>
    Широкий текст 

 
 Однако в следующем примере правило стиля будет соответствовать только h2
элемент со значением идентификатора «z98y». Правило не будет соответствовать
Элемент P в этом примере:
<ГОЛОВА>
   Соответствует только h2 
  

<ТЕЛО>
    Широкий текст 

 
Селекторы ID имеют более высокую специфичность, чем селекторы атрибутов.
Например, в HTML селектор  # p123  более конкретен.
чем  [id = p123]  с точки зрения каскада.
   Примечание.  В XML 1.0 [XML10], информация о котором
Атрибут содержит идентификаторы элементов, содержащихся в DTD. когда
анализируя XML, UA не всегда читают DTD и, следовательно, могут не знать
каков идентификатор элемента.Если разработчик таблиц стилей знает или
подозревает, что это будет так, он должен использовать обычный атрибут
селекторы вместо:  [name = p371]  вместо  № p371 . Однако каскадный порядок нормального атрибута
селекторы отличается от селекторов идентификаторов. Возможно, потребуется добавить
"! important" приоритет объявлений:  [name = p371]
{красный цвет ! important} . 
 Если элемент имеет несколько атрибутов идентификатора, все они должны быть
обрабатывается как идентификаторы этого элемента для целей идентификатора
селектор.Такой ситуации можно достичь, используя смесь xml: id.
[XMLID], DOM3 Core [DOM-LEVEL-3-CORE], XML DTD [XML10] и
знания, специфичные для пространства имен.
 В CSS 2.1 стиль обычно прикрепляется к элементу на основе его
положение в дереве документа. Этот
простой модели достаточно для многих случаев, но некоторые общие публикации
сценарии могут быть невозможны из-за структуры дерева документа. Например, в HTML
4 (см. [HTML4]), ни один элемент не ссылается на первую строку
абзац, и, следовательно, никакой простой селектор CSS не может ссылаться на него.
 CSS вводит концепции псевдоэлементов   и  псевдоклассов , чтобы разрешить
форматирование на основе информации, которая лежит за пределами документа
дерево.
 Псевдоэлементы создают абстракции о дереве документа за пределами
те, которые указаны в языке документа. Например, документ
языки не предлагают механизмов для доступа к первой букве или первому
строка содержимого элемента. Псевдоэлементы CSS позволяют использовать таблицу стилей
дизайнеры ссылаться на это иначе недоступно
Информация.Псевдоэлементы также могут предоставить разработчикам таблиц стилей
способ присвоения стиля контенту, которого нет в источнике
документ (например,: до и: после
псевдоэлементы дают доступ к сгенерированному контенту).
 Псевдоклассы классифицируют элементы по характеристикам, отличным от
их имя, атрибуты или содержание; в принципе характеристики, которые
не может быть выведен из дерева документа. Псевдоклассы могут быть
динамический, в том смысле, что элемент может приобретать или терять
псевдокласс, пока пользователь взаимодействует с документом.Исключения
являются ': first-child', которые  могут быть  выводится из дерева документов, и
': lang ()', который может быть
в некоторых случаях выводится из дерева документов.
 В документе не появляются ни псевдоэлементы, ни псевдоклассы.
источник или дерево документов.
 Псевдоклассы разрешены в любом месте селекторов, а
псевдоэлементы могут быть добавлены только после последнего простого селектора
селектор.
 В именах псевдоэлементов и псевдоклассов регистр не учитывается.
 Некоторые псевдоклассы являются взаимоисключающими, в то время как другие могут быть
применяется одновременно к одному и тому же элементу. В случае противоречия
правила, нормальное каскадирование
порядок определяет результат.
 5.11.1: псевдокласс first-child 
 Псевдокласс: first-child
соответствует элементу, который является первым дочерним элементом какого-либо другого элемента.
 Пример (ы):
 В следующем примере селектор соответствует любому элементу P
это первый потомок элемента DIV.Правило
подавляет отступ для первого абзаца DIV:
div> p: first-child {text-indent: 0}
 Этот селектор будет соответствовать P внутри DIV
следующий фрагмент: Последний P перед примечанием.

    Первая буква P внутри примечания.

 но не будет соответствовать второму P в следующих
фрагмент: Последний P перед примечанием.

     Примечание  
    Первая буква P внутри примечания.
 
 Пример (ы):
 Следующее правило устанавливает жирность шрифта для любого EM
элемент, который является потомком элемента P, который является первым
ребенок:
p: first-child em {font-weight: bold}
 
 Обратите внимание, что поскольку анонимный
коробки не являются частью дерева документа, они не учитываются, когда
расчет первого ребенка.
 Например, EM в:
 abc  по умолчанию 
 
- первый ребенок от P. Следующие два селектора эквивалентны:
*> a: first-child / * A - первый дочерний элемент любого элемента * /
a: first-child / * То же * /
 
 5.11.2 Псевдоклассы ссылок:: link и :hibited 
 Пользовательские агенты обычно отображают непосещенные ссылки иначе, чем
ранее посещенные. CSS предоставляет псевдоклассы ': link' и
': посещено', чтобы различать их:
 Псевдокласс: link применяется к ссылкам, которые имеют
еще не посетили.
 Псевдокласс: visit применяется после того, как ссылка была
посетил пользователь.
 UA могут вернуть посещенную ссылку в (не посещенное) состояние ': link' в
какой-то момент.
 Эти два состояния исключают друг друга.
 Язык документа определяет, какие элементы являются гиперссылками.
исходные якоря. Например, в HTML4 псевдоклассы ссылок
применяются к элементам A с атрибутом "href". Таким образом, следующие
два объявления CSS 2.1 имеют аналогичный эффект:
а: ссылка {цвет: красный}
: ссылка {цвет: красный}
 
 Пример (ы):
 Если по следующей ссылке:
 сторона / "> внешняя ссылка 
 
был посещен, это правило:a.external: посетил {color: blue}
 
заставит его быть синим. Примечание. Авторы таблиц стилей могут злоупотреблять
: link и: посещенные псевдоклассы, чтобы определить, какие сайты есть у пользователя
посещены без согласия пользователя.
 UA могут, таким образом, рассматривать все ссылки как невидимые ссылки или реализовывать
другие меры по сохранению конфиденциальности пользователя при отображении посещенных
и непосещенные ссылки по-разному.См. [P3P] для получения дополнительной информации.
о конфиденциальности.
 5.11.3 Динамические псевдоклассы:
: hover,: active и: focus 
 Интерактивные пользовательские агенты иногда изменяют рендеринг в ответ
к действиям пользователя. CSS предоставляет три псевдокласса для общих случаев:
 Псевдокласс: hover применяется, когда пользователь указывает
элемент (с каким-то указывающим устройством), но не активирует его. За
Например, визуальный пользовательский агент может применить этот псевдокласс, когда
курсор (указатель мыши) наведен на поле, созданное элементом. Пользовательские агенты не поддерживают
интерактивные медиа
не обязательно поддерживать этот псевдокласс.
Некоторые соответствующие пользовательские агенты, поддерживающие
интерактивные медиа
может не поддерживать этот псевдокласс (например, перьевое устройство).
 Псевдокласс: active применяется, пока элемент
активируется пользователем. Например, между нажатиями пользователем
кнопку мыши и отпускает ее.
 Псевдокласс: focus применяется, пока элемент имеет
фокус (принимает события клавиатуры или другие формы ввода текста).
 Элемент может соответствовать нескольким псевдоклассам одновременно.
 CSS не определяет, какие элементы могут находиться в указанных выше состояниях, или
как состояния входят и выходят. Сценарии могут изменить
элементы реагируют на пользовательские события или нет, а разные устройства и UA
могут иметь разные способы указывать на элементы или активировать их.
 CSS 2.1 не определяет, является ли родительский элемент
': active' или ': hover' также находятся в этом состоянии.
 Агентам пользователя не требуется перекомпоновка отображаемого в данный момент
документ из-за переходов псевдоклассов.Например, таблица стилей
может указывать, что 'font-size' ссылки: active
должен быть больше, чем у неактивной ссылки, но поскольку это может
заставляют буквы менять положение, когда читатель выбирает ссылку,
UA может игнорировать соответствующее правило стиля.
 Пример (ы):
a: link {color: red} / * непосещенные ссылки * /
a: посещенные {color: blue} / * посещенные ссылки * /
a: hover {color: yellow} / * пользователь наводит курсор * /
a: active {color: lime} / * активные ссылки * /
 
 Обратите внимание, что A: hover должен быть помещен после ссылки A: и A: посещено.
rules, поскольку в противном случае каскадные правила скроют свойство 'color' элемента A: hover
правило.Точно так же, поскольку A: active помещается после A: hover, активный
цвет (салатовый) будет применяться, когда пользователь одновременно активирует и наводит курсор
элемент A.
 Пример (ы):
 Пример объединения динамических псевдоклассов:
a: focus {background: yellow}
a: focus: hover {background: white}
 
 Последний селектор соответствует элементам A, которые находятся в псевдоклассе
: focus и в псевдоклассе: hover.
 Для получения информации о презентации контуров фокуса просьба
обратитесь к разделу о динамических
очертания фокуса.
   Примечание.  В CSS1 псевдокласс ': active' был взаимно
эксклюзивно с ': link' и ': loaded'. Это уже не так. An
может быть как ': посещено', так и ': активным' (или ': ссылка' и
': active') и обычные правила каскадирования определяют, какой стиль
декларации
применять. 
   Примечание.  Также обратите внимание, что в CSS1 псевдокласс ': active' применяется только к
ссылки. 
 5.11.4 Псевдокласс языка:: lang 
 Если язык документа определяет, как человеческий язык элемента
определено, можно написать селекторы в CSS, которые соответствуют
элемент в зависимости от его языка. Например, в HTML [HTML4]
язык определяется комбинацией атрибута "lang",
Элемент META и, возможно, информация из протокола (например,
Заголовки HTTP). XML использует атрибут с именем xml: lang, и может быть
другие методы определения языка для конкретного языка документа.
 Псевдокласс ': lang (C)' соответствует, если элемент на языке
C. Наличие совпадения зависит только от идентификатора C
равная или разделенная дефисом подстрока строки
значение языка элемента, точно так же, как если бы оно было выполнено оператором '| ='.Соответствие C
для языкового значения элемента выполняется без учета регистра
для символов в диапазоне ASCII.
Идентификатор C не обязательно должен быть допустимым названием языка.
 C не может быть пустым.
 Примечание. Рекомендуется, чтобы документы и
протоколы указывают язык с помощью кодов из BCP 47 [BCP47] или
его преемник, и с помощью атрибутов "xml: lang" в случае
Документы на основе XML [XML10]. Увидеть
«Часто задаваемые вопросы: двухбуквенные или трехбуквенные коды языков».
 Пример (ы):
 Следующие правила устанавливают кавычки для HTML-документа.
то есть на канадском французском или немецком:
html: lang (fr-ca) {цитаты: '' ''}
html: lang (de) {цитаты: '' '' '\ 2039' '\ 203A'}
: lang (fr)> Q {цитаты: '' ''}
: lang (de)> Q {цитаты: '' '' '\ 2039' '\ 203A'}
 
 Вторая пара правил фактически устанавливает свойство 'кавычки' для элементов Q
в соответствии с языком его родителя.Это сделано потому, что
выбор кавычек обычно зависит от языка
элемент вокруг цитаты, а не сама цитата: как этот кусок
Французское «à l'improviste» в середине английского
текст использует английские кавычки.
  Обратите внимание на  разницу между [lang | = xx] и
 : lang (xx). В этом примере HTML только BODY соответствует [lang | = fr]
 (потому что у него есть атрибут LANG), но BODY и P соответствуют
 : lang (fr) (потому что оба на французском).
 
   Je suis Français. 
  
 Псевдоэлементы ведут себя так же, как настоящие элементы в CSS с
исключения описаны ниже и в других местах.
  Обратите внимание, что следующие разделы не определяют
точное отображение ': first-line' и ': first-letter' во всех случаях. А
будущий уровень CSS может определить их более точно. 
 5.12.1 Псевдоэлемент: first-line 
 Псевдоэлемент: first-line применяет специальные стили к
содержимое первой отформатированной строки абзаца.За
экземпляр:
p: первая строка {преобразование текста: верхний регистр}
 
 Приведенное выше правило означает "изменить буквы первой строки
каждый абзац в верхнем регистре ". Однако селектор" P: first-line "
не соответствует ни одному реальному элементу HTML. Он соответствует псевдоэлементу
что соответствующие пользовательские агенты
будет вставлять в начале каждого абзаца.
 Обратите внимание, что длина первой строки зависит от количества
факторов, включая ширину страницы, размер шрифта и т. д. Таким образом,
обычный абзац HTML, например:
 Это довольно длинный HTML-код.
параграф, который будет разбит на несколько
линий.Будет определена первая строка
вымышленной последовательностью тегов. Остальные строки
будут рассматриваться как обычные строки в
абзац. 
 
, строки которого прерваны следующим образом:
ЭТО ДЛИННЫЙ ПАРАГРАФ HTML, КОТОРЫЙ
будет разбит на несколько строк. Первое
линия будет обозначена вымышленным тегом
последовательность. Остальные строки будут рассматриваться как
обычные строки в абзаце.
 
 может быть "переписан" пользовательскими агентами для включения вымышленного тега .
последовательность  для: первая строка.Эта вымышленная последовательность тегов помогает
чтобы показать, как наследуются свойства.
    Это довольно длинный HTML-код.
абзац, что    будет разбит на несколько
линий. Будет определена первая строка
вымышленной последовательностью тегов. Остальные строки
будут рассматриваться как обычные строки в
абзац. 
 
 Если псевдоэлемент разбивает реальный элемент, желаемый эффект
часто можно описать вымышленной последовательностью тегов, которая закрывает и
затем повторно открывает элемент.Таким образом, если разметить предыдущий абзац
с элементом SPAN:
    Это довольно длинный HTML-код.
параграф, который будет разбит на несколько
линий.    Будет определена первая строка
вымышленной последовательностью тегов. Остальные строки
будут рассматриваться как обычные строки в
абзац. 
 
 пользовательский агент может имитировать начальные и конечные теги для
SPAN при вставке вымышленной последовательности тегов для: first-line.
     Это
довольно длинный HTML
параграф который будет        будет
разбит на несколько
линий.   Будет определена первая строка
вымышленной последовательностью тегов. Остальные строки
будут рассматриваться как обычные строки в
абзац. 
 
 Псевдоэлемент: first-line
может быть прикреплен только к блоку
контейнерный элемент.
 "Первая отформатированная строка"
элемент может находиться внутри
потомок уровня блока в том же потоке (т. е. уровень блока
потомок, который не позиционируется и не является плавающим). Например, первый
строка DIV в 
 Это
линия...
 & lt / DIV>  - первая строка P (при условии, что
что и P, и DIV являются блочными).
 Первая строка ячейки таблицы или встроенного блока не может быть первой
отформатированная строка элемента-предка. Таким образом, в 
 Здравствуйте, 
 До свидания
 etcetera
  первая отформатированная строка DIV не
строка «Привет».
 Обратите внимание, что первая строка буквы P в этом фрагменте: 
 Первый...  не содержит букв
(при условии стиля по умолчанию для BR в HTML 4). Слово «первый»
не в первой отформатированной строке.
 UA должен действовать так, как будто вымышленные начальные теги первой строки
псевдоэлементы были вложены только внутри самого внутреннего окружающего
блочный элемент. (Поскольку CSS1 и CSS2 ничего не говорили об этом случае,
авторы не должны полагаться на такое поведение.) Вот пример. В
вымышленная последовательность тегов для

   Первый абзац 
   Второй абзац 

 
 это

     Первый абзац   
    Второй абзац  

 
 Псевдоэлемент: first-line аналогичен
к элементу встроенного уровня, но с некоторыми ограничениями.В
следующие свойства применяются к псевдоэлементу: первая строка: свойства шрифта, цвет
собственность, фон
properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'text-transform' и 'line-height'. UA могут подать заявку
и другие свойства.
 5.12.2 Псевдоэлемент: first-letter 
 Псевдоэлемент: first-letter должен выбирать первую букву
первая строка блока, если ей не предшествует другой контент
(например, изображения или встроенные таблицы) в своей строке. The: первая буква
псевдоэлемент может использоваться для «начальных заглавных букв» и «буквиц», которые являются обычными типографскими эффектами.Этот
тип начальной буквы похож на элемент встроенного уровня, если его
свойство 'float' равно 'none',
в остальном он похож на плавающий элемент.
 Это свойства, которые применяются к псевдоэлементам с первой буквой:
свойства шрифта,
'текст-украшение',
'преобразование текста',
'Межбуквенное расстояние',
"межсловный интервал" (при необходимости),
'высота линии',
'плавать',
'vertical-align' (только если 'float' равно 'none'),
свойства маржи,
свойства заполнения,
свойства границы,
свойство цвета,
фоновые свойства.UA могут также применять другие свойства.
Чтобы позволить UA отображать типографически правильную буквицу или инициал
cap, UA может выбрать высоту, ширину и высоту строки в зависимости от
форма буквы, в отличие от обычных элементов. CSS3 должен
имеют определенные свойства, относящиеся к первой букве.
 В этом примере показан возможный рендеринг начальной шапки. Заметка
что "высота строки", наследуемая первой буквой
псевдоэлемент равен 1.1, но UA в этом примере вычислил
высота первой буквы разная, чтобы она не вызывала
лишний пробел между первыми двумя строками.Также обратите внимание, что
вымышленный начальный тег первой буквы находится внутри SPAN, и поэтому
начертание первой буквы нормальное, а не жирное, как у SPAN:
p {высота строки: 1.1}
p: первая буква {размер шрифта: 3em; font-weight: normal}
диапазон {font-weight: bold}
...
  Het hemelsche  gerecht heeft zich ten lange lesten 

Erbarremt над моим en mijn benaeuwde vesten 

En arme burgery, en op mijn volcx gebed 

En dagelix geschrey de bange stad ontzet.
 В следующем CSS 2.1 начальная буква буквицы будет занимать около двух строк:


 <ГОЛОВА>
   Буквица буквицы 
  
 
 <ТЕЛО>
    Первые  несколько слов статьи
    в журнале The Economist.
 

 
 Этот пример может иметь следующий формат:
 Вымышленная последовательность тегов:



Т
 он первый

Несколько слов из статьи в Economist.

 
 Обратите внимание, что теги псевдоэлементов: first-letter упираются в контент
(т. е. начальный символ), а псевдоэлемент: first-line
Начальный тег вставляется сразу после начального тега блочного элемента.
 Чтобы добиться традиционного форматирования буквиц, пользовательские агенты
может приблизительно соответствовать размеру шрифта, например, для выравнивания базовых линий. Так же
При форматировании может учитываться контур глифа.
 Пунктуация (т. Е. Символы, определенные в Unicode [UNICODE] в
«открыть» (Ps), «закрыть» (Pe), «начальное» (Pi). «финал» (Pf) и «прочее»
(Po) классы пунктуации), что
следует включать перед первой буквой или после нее, например:
 ': first-letter' также применяется, если первая буква на самом деле является
цифра, e.г., цифра «6» в «67 млн долларов - большие деньги».
 Применяется псевдоэлемент: first-letter
для блокировки элементов контейнера.
 Псевдоэлемент: first-letter может использоваться со всеми такими элементами, которые
содержат текст или имеют потомков в том же потоке, который содержит
текст. UA должен действовать так, как будто вымышленный начальный тег
псевдоэлемент с первой буквой находится непосредственно перед первым текстом
элемент, даже если этот первый текст находится в потомке.
 Пример (ы):
 Вот пример.Вымышленная последовательность тегов для этого HTML
фрагмент:

 Первый текст.
 
 это:

   T   первый текст.
 
 Первая буква ячейки таблицы или встроенного блока не может быть
первая буква элемента-предка. Таким образом, в 
 Здравствуйте, 
 До свидания
 etcetera
  первая буква DIV не является
буква «Н».Фактически, у DIV нет первой буквы.
 Первая буква должна находиться в первой отформатированной строке. Например, в
этот фрагмент: 
 Первая ...  первая строка
не содержит букв и ': first-letter' ничего не соответствует
(при условии стиля по умолчанию для BR в HTML 4). В частности, это
не соответствует букве "F" в "First".
 Если элемент является элементом списка
('display: list-item'), ': first-letter' применяется к первому
буква в основном поле после маркера.UA могут игнорировать
': first-letter' в элементах списка с 'list-style-position: inside'. Если
у элемента есть ': before' или ': after' содержание, ': первая буква
применяется к первой букве элемента , включая , который
содержание.
 Например, после правила 'p: before {content: "Note:"}' селектор
'p: first-letter' соответствует букве «N» в «Note».
 Некоторые языки могут иметь особые правила обращения с определенными
буквосочетания. Например, на голландском языке, если комбинация букв
"ij" появляется в начале слова, обе буквы должны быть
рассматривается в псевдоэлементе: first-letter.
 Если буквы, образующие первую букву, не совпадают
элемент, такой как "'T" в 
'  T ... , UA может
создать псевдоэлемент с первой буквой из одного из элементов, оба
элементы, или просто не создавать псевдоэлемент.
 Аналогично, если первая буква (буквы) блока не находится в начале
строки (например, из-за двунаправленного переупорядочения), то UA
не нужно создавать псевдоэлементы.
 Пример (ы):
 Следующий пример иллюстрирует
как могут взаимодействовать перекрывающиеся псевдоэлементы.Первая буква
каждый элемент P будет зеленым с размером шрифта «24pt». Остальные
первая отформатированная строка будет синей, а остальная часть
абзац будет «красным».
p {цвет: красный; font-size: 12pt}
p: первая буква {цвет: зеленый; font-size: 200%}
p: первая строка {цвет: синий}

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



S
 текст, который

заканчивается на двух строках

 
 Обратите внимание, что элемент: first-letter находится внутри: first-line
элемент.
No related posts.

Пример	Классификация	Пояснение
`h2`	Выбор типа	Выбирает элемент по его типу
`. Бирка`	Селектор класса	Выбирает элемент по значению атрибута класса, который может использоваться многократно на странице
`#intro`	Селектор идентификатора	Выбирает элемент по значению атрибута ID, который является уникальным и должен использоваться только один раз на странице

Пример	Классификация	Пояснение
`артикул h3`	Селектор потомков	Выбирает элемент, который находится где угодно в пределах идентифицированного элемента-предка
`артикул> p`	Прямой дочерний селектор	Выбирает элемент, который находится непосредственно внутри идентифицированного родительского элемента

Шаблон	Значение	Описано в разделе
*	Соответствует любому элементу.	Универсальный selector
E	Соответствует любому элементу E (т. е. элементу типа E).	Тип селекторы
E F	Соответствует любому элементу F, который является потомком элемент E.	Потомок селекторы
E> F	Соответствует любому элементу F, который является дочерним элементом элемент E.	Дочерние селекторы
E: first-child	Соответствует элементу E, когда E является первым дочерний элемент своего родителя.	Псевдокласс: first-child
E: ссылка E: посещенный	Соответствует элементу E, если E является источником привязка гиперссылки, цель которой еще не посещалась (: ссылка) или уже посещал (: посетил).	Псевдоклассы ссылки
E: active E: hover E: focus	Соответствует E во время определенных действия пользователя.	Динамические псевдоклассы
E: lang (c)	Соответствует элементу типа E, если он на (человеческом) языке c (язык документа указывает, как определяется язык).	Псевдокласс: lang ()
E + F	Соответствует любому элементу F, которому непосредственно предшествует родственный элемент E.	Смежные селекторы
E [foo]	Соответствует любому элементу E с Установлен атрибут "foo" (независимо от его значения).	Селекторы атрибутов
E [foo = "warning"]	Соответствует любому элементу E, Значение атрибута "foo" в точности равно значению "warning".	Селекторы атрибутов
E [foo ~ = "warning"]	Соответствует любому элементу E, Значение атрибута "foo" представляет собой список значений, разделенных пробелами, одно из что в точности равно "предупреждению".	Селекторы атрибутов
E [lang \| = "en"]	Соответствует любому элементу E, Атрибут "lang" содержит список значений, разделенных дефисами. начиная (слева) с "en".	Селекторы атрибутов
DIV.warning	Зависит от языка. (в HTML то же как DIV [class ~ = "warning"].)	Селекторы классов
E # myid	Соответствует любому элементу E с идентификатором равно «myid».	Селекторы ID