Css контекстные селекторы: Контекстные селекторы | htmlbook.ru

Проверьте себя упражнениями!

Все селекторы комбинаторов CSS

Селекторы CSS | Учебник CSS

Хорошо! Итак, теперь, когда вы хорошо разбираетесь в синтаксисе CSS, давайте перейдем к Selectors .Селектор помогает нам идентифицировать элементы HTML, к которым нужно применить тот или иной стиль.

Селекторы

бывают 3-х типов, а именно

1. элемент Селекторы
2. id Селекторы
3. класс Селекторы

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

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

), не беспокойтесь, если вы не помните, мы обсудим это снова в этом руководстве. Помимо селектора элементов, двумя наиболее распространенными формами селекторов являются селекторы id и class .

В видео ниже мы подробно объяснили все три типа селекторов CSS.

Селекторы элементов (тегов)

Селектор элементов или селектор тегов, работает на уровне тегов HTML.Когда мы добавляем стиль для HTML-тега напрямую в наш CSS-файл, он называется селекторами элементов.

Например:

HTML код

  
 Добро пожаловать в Studytonight 
  

Код CSS

  h2 {
    красный цвет;
}  

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

Приведенный выше код CSS изменит цвет шрифта текста внутри всех тегов h2 в файле HTML на красный . Этот режим выбора следует использовать, когда вы хотите применить базовый стиль к любому элементу / тегу, например, если вы хотите, чтобы весь текст абзаца был шрифтом calibri , вы пишете следующее правило CSS:

  п {
    семейство шрифтов: calibri;
}  

Живой пример →

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

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

Элементы в HTML могут быть названы для удобства использования с помощью атрибута id внутри тега. Рассмотрим следующий пример:

  
 CSS - это весело! 
  

Теперь, когда тегу присвоено имя, мы можем назначить ему правило стиля, просто используя тег #unique ( # , за которым следует значение идентификатора ).

  #unique {
    цвет: зеленый;
    выравнивание текста: центр;
}  

Живой пример →

Селектор

#id используется, когда вы хотите стилизовать определенный тег / элемент.Все, что вам нужно сделать, это присвоить тегу HTML атрибут id и указать его стиль в файле CSS.

Мы также можем сделать селектор id , специфичный для тега / элемента, добавив тег перед селектором #id в файле CSS.

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

  p # star {
    семейство шрифтов: Arial;
}  

Живой пример →

При этом будут выбраны только элементы абзаца с атрибутом id , установленным на звездочка .Сравнивая это правило с тем, что мы видели ранее,

  #star {
    семейство шрифтов: Arial;
}  

Что будет соответствовать любому элементу / тегу с id = "star" , будь то абзацы заголовков. Это может ответить на ваш вопрос, могут ли несколько тегов иметь один и тот же идентификатор? Да, они могут! Но по стандартной практике для стилизации отдельного элемента следует использовать атрибут id .

Хотя CSS предоставляет вам способ выбора правил идентификаторов для конкретных элементов , таких как p # star , нецелесообразно все время использовать одни и те же имена тегов вместе с селектором id , а затем фильтровать их на основе элементов.Однако такие правила имеют смысл, если у вас есть таблица стилей, которая используется на всем сайте, и у вас есть разные элементы с идентификатором , звездочкой в разных документах. Чтобы обезопасить себя и избежать путаницы, лучше использовать уникальный идентификатор для элементов.

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

Правила для селекторов класса определены как . Имя-класса , как показано ниже:

HTML код

  
 Прикольный абзац 
 Мне нравится заголовок 
 Я тоже! 
  

Код CSS

 .класс {
    цвет фона: черный;
    цвет белый;
    стиль шрифта: курсив;
}  

Живой пример →

Атрибут class используется для определения имени класса, которому принадлежит конкретный тег или набор тегов. В отличие от значений id , значения класса не обязательно должны быть уникальными, потому что многие элементы могут быть членами одного и того же класса стиля. Фактически, элементы разного типа также могут принадлежать к одному классу стилей.

Правила класса также имеют некоторые вариации.Например, установив для всех элементов h2 класса css_demo желтый цвет фона,

  h2.css_demo {цвет фона: желтый; }  

можно использовать.

Для явного выбора всех элементов класса css_demo , также можно использовать * .

  * .css_demo {цвет фона: желтый; }  

такой же, как,

  .css_demo {цвет фона: желтый; }  

Хотя атрибуты class и id обеспечивают большую гибкость при создании правил стиля, существует множество других тегов с равным значением.Например, вы можете обрабатывать все теги внутри

иначе, чем теги , появляющиеся вне тегов

. Для этого необходимо использовать Контекстный выбор .

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

  p> strong {
    цвет фона: желтый;
}  

Живой пример →

Вышеупомянутое правило будет применяться ко всем тегам внутри тега

.

Все вхождения элемента strong в элементе p будут иметь шрифт Helvetica . К другим вхождениям тега strong , которые не включены в тег p , не будет применено то же правило.

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

Теперь, когда вы освоились с селекторами, перейдем к стилям фона в CSS!

CSS-селекторов — SitePoint

Знакомство с CSS-селекторами

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

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

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

  * {
цвет: зеленый;
размер шрифта: 20 пикселей;
высота строки: 25 пикселей;
}  

Три строки кода внутри фигурных скобок ( цвет , font-size и line-height ) будут применяться ко всем элементам на странице HTML.Как видно здесь, универсальный селектор объявлен звездочкой. Вы также можете использовать универсальный селектор в сочетании с другими селекторами.

Выбор типа элемента

Также называемый просто «селектором типа», этот селектор должен соответствовать одному или нескольким элементам HTML с тем же именем. Таким образом, селектор nav будет соответствовать всем элементам HTML nav , а селектор

будет соответствовать всем неупорядоченным спискам HTML или элементам
.

В следующем примере используется селектор типа элемента для сопоставления всех элементов

:

  ul {
стиль списка: нет;
граница: сплошная 1px #ccc;
}  

Чтобы поместить это в некоторый контекст, вот раздел HTML, к которому мы применим приведенный выше CSS:

  

  
 Рыба 
  
 Яблоки 
  
 Сыр 



  
 Пример текста абзаца. 



  
 Вода 
  
 Сок 
  
 Кленовый сироп 
  

Эту часть страницы составляют три основных элемента: два элемента

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

, но не к
. Если бы мы изменили селектор типа элемента на использование

вместо

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

.

Также обратите внимание, что стили не будут применяться к элементам внутри элементов

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

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

Селектор идентификатора объявляется с помощью решетки или символа решетки ( # ) перед строкой символов. Строка символов определяется разработчиком. Этот селектор соответствует любому элементу HTML, у которого есть атрибут ID с тем же значением, что и у селектора, но без символа решетки.

Вот пример:

  #container {
ширина: 960 пикселей;
маржа: 0 авто;
}  

Этот CSS использует селектор идентификатора для соответствия элементу HTML, например:

В данном случае тот факт, что это элемент

, не имеет значения — это может быть любой тип HTML-элемента.Если у него есть атрибут ID со значением , контейнер , стили будут применяться.

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

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

Помимо проблем негибкости, селекторы ID также имеют проблему очень высокой специфичности.

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

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

Возьмите следующий набор правил:

  .box {
отступ: 20 пикселей;
маржа: 10 пикселей;
ширина: 240 пикселей;
}  

Эти стили будут применяться к следующему элементу HTML:

Те же стили будут применяться и к любым другим элементам HTML, у которых есть атрибут class со значением box . Наличие нескольких элементов на одной странице с одним и тем же атрибутом класса полезно, поскольку позволяет повторно использовать стили и избегать ненужного повторения.В дополнение к этому, селекторы классов имеют очень низкую специфичность — опять же, подробнее об этом позже.

Еще одна причина, по которой селектор классов является ценным союзником, заключается в том, что HTML позволяет добавлять несколько классов к одному элементу. Это делается путем разделения классов в атрибуте HTML class с помощью пробелов. Вот пример:

Комбинатор потомков

Селектор потомков или, точнее, комбинатор потомков позволяет вам комбинировать два или более селектора, чтобы вы могли более точно использовать свой метод выбора.Например:

  #container .box {
плыть налево;
padding-bottom: 15 пикселей;
}  

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

Посмотрите на следующий HTML-код:

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

, который имеет класс box .Стили не затронут элемент

, имеющий класс box-2 . Точно так же не будет затронут второй элемент

с классом box , потому что он не находится внутри элемента с идентификатором container .

Вы должны быть осторожны при использовании комбинатора потомков в вашем CSS. Этот вид селектора, делая ваш CSS немного более читабельным, может излишне ограничивать ваши стили конкретным контекстом — в этом случае стили ограничены рамками внутри #container — что может сделать ваш код негибким.

Детский комбинатор

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

  #container> .box {
плыть налево;
padding-bottom: 15 пикселей;
}  

Это тот же код из примера комбинатора потомков, но вместо символа пробела мы используем символ «больше» (или правую угловую скобку).

В этом примере селектор будет соответствовать всем элементам, которые имеют класс box и являются непосредственными дочерними элементами элемента #container .Это означает, что, в отличие от комбинатора-потомка, не может быть другого элемента, охватывающего .box — он должен быть прямым дочерним элементом.

Вот пример HTML:

В этом примере CSS из предыдущего примера кода будет применяться только к первому элементу

, который имеет класс box . Как видите, второй элемент

с классом box находится внутри другого элемента

.В результате стили не будут применяться к этому элементу, даже если он также имеет класс , поле .

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

General Sibling Combinator

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

  h3 ~ p {
нижнее поле: 20 пикселей;
}  

Этот тип селектора объявляется с помощью символа тильды (~).В этом примере для всех элементов абзаца (

) будет применен стиль в соответствии с указанными правилами, но только если они являются родственниками элементов

. Между

и

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

Давайте применим приведенный выше CSS к следующему HTML:

  
 Заголовок 
 Пример абзаца 
 Пример абзаца 
 Пример абзаца.

  
 Пример абзаца 
  

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

, потому что он находится внутри элемента

.

Объединитель смежных братьев и сестер

Селектор, использующий комбинатор соседних братьев и сестер, использует знак плюса (+) и почти такой же, как и общий селектор братьев и сестер.Разница в том, что целевой элемент должен быть непосредственным родственником, а не только общим. Давайте посмотрим, как выглядит код CSS для этого:

  п + п {
текстовый отступ: 1.5em;
нижнее поле: 0;
}  

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

Итак, если мы применим этот селектор к следующему HTML:

  
 Заголовок 
 Пример абзаца 
 Пример абзаца 
 Пример абзаца 


  
 Пример абзаца 
  
 Пример абзаца 
  

… стили будут применяться только ко второму, третьему и пятому абзацам в этом разделе HTML.

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

Селектор атрибута нацелен на элементы на основе наличия и / или значения атрибутов HTML и объявляется с использованием квадратных скобок:

  input [type = "text"] {
цвет фона: # 444;
ширина: 200 пикселей;
}  

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

Но это не совпадет с этим:

Селектор атрибута также может быть объявлен с использованием только самого атрибута без значения, например:

  ввод [тип] {
цвет фона: # 444;
ширина: 200 пикселей;
}  

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

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

Псевдокласс

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

  a: hover {
красный цвет;
}  

В данном случае псевдоклассом селектора является часть : hover . Здесь мы прикрепили этот псевдокласс ко всем элементам привязки ( элементов). Это означает, что когда пользователь наводит указатель мыши на элемент , свойство color для этого элемента изменится на красный. Этот тип псевдокласса является динамическим псевдоклассом, потому что он возникает только в ответ на взаимодействие с пользователем — в данном случае при перемещении мыши по целевому элементу.

Важно понимать, что эти типы селекторов не просто выбирают элементы; они выбирают элементы, которые находятся в определенном состоянии. Для целей этого примера состояние — это состояние «зависания».

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

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

 .container: before {
содержание: "";
дисплей: блок;
ширина: 50 пикселей;
высота: 50 пикселей;
цвет фона: # 141414;
}  

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

CSS-селекторов · Документы WebPlatform

Сводка

Селектор представляет структуру. Эта структура может использоваться как условие (например,грамм. в правиле CSS), который определяет, каким элементам соответствует селектор в дереве документа, или как простое описание фрагмента HTML или XML, соответствующего этой структуре.

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

Ссылка на селектор CSS

Селектор типа

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

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

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

Селектор ID

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

Динамические псевдоклассы

Целевой псевдокласс

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

Элемент пользовательского интерфейса состояния псевдоклассов

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

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

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

Комбинаторы

Комбинатор потомков

Детский комбинатор

Комбинатор смежных братьев и сестер

Общий родственный комбинатор

Чувствительность к регистру

Синтаксис All Selectors нечувствителен к регистру в пределах диапазона ASCII (т.е.е. [a-z] и [A-Z] эквивалентны), за исключением частей, которые не находятся под контролем Selectors. Чувствительность к регистру имен элементов языка документа, имен атрибутов и значений атрибутов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, но в XML они чувствительны к регистру. Чувствительность к регистру префиксов пространств имен определяется в CSS3NAMESPACE.

Синтаксис селектора

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

Простой селектор — это селектор типа, универсальный селектор, селектор атрибутов, селектор класса, селектор идентификатора или псевдокласс.

Комбинаторами

являются: пробел, «знак больше» (U + 003E,>), «знак плюс» (U + 002B, +) и «тильда» (U + 007E, ~).Между комбинатором и простыми селекторами вокруг него может появиться пробел. Только символы «пробел» (U + 0020), «табуляция» (U + 0009), «перевод строки» (U + 000A), «возврат каретки» (U + 000D) и «подача страницы» (U + 000C) ) может находиться в пробелах. Другие символы, похожие на пробелы, такие как «em-пробел» (U + 2003) и «идеографическое пространство» (U + 3000), никогда не являются частью пробела.

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

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

Некоторые селекторы поддерживают префиксы пространства имен.Механизм объявления префиксов пространства имен должен определяться языком, который использует селекторы. Если в языке не указан механизм объявления префиксов пространства имен, префиксы не объявляются. В CSS префиксы пространства имен объявляются правилом @namespace. CSS3NAMESPACE

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

Список селекторов, разделенных запятыми, представляет собой объединение всех элементов, выбранных каждым из отдельных селекторов в списке. (Запятая — U + 002C.) Например, в CSS, когда несколько селекторов используют одни и те же объявления, они могут быть сгруппированы в список, разделенный запятыми.Перед запятой и / или после нее может быть пробел.

В этом примере мы объединяем три правила с идентичными объявлениями в одно. Таким образом,

  h2 {font-family: sans-serif}
h3 {font-family: sans-serif}
h4 {font-family: sans-serif}
  

эквивалентно:

  h2, h3, h4 {font-family: sans-serif}
  

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

Пример неверного CSS:

  h2 {font-family: sans-serif}
h3..foo {font-family: sans-serif}
h4 {font-family: sans-serif}
  

не эквивалентно:

  h2, h3..foo, h4 {font-family: sans-serif}
  

, потому что указанный выше селектор (h2, h3… foo, h4) полностью недопустим, и все правило стиля отбрасывается.(Когда селекторы не сгруппированы, отбрасывается только правило для h3… foo.)

См. Также

Связанные темы

Список выбора

[css / selectors / -ms-scrollbar-shadow-color] (/ css / selectors / -ms-scrollbar-shadow-color)	[css / selectors / ID] (/ css / selectors / ID)	[css / selectors / Namespaced] (/ css / selectors / Namespaced)
[css / selectors / Type] (/ css / selectors / Type)	[css / selectors / Universal] (/ css / selectors / Universal)	[css / selectors / attribute selector] (/ css / selectors / attribute_selector)
[CSS / селекторы / атрибуты / равенство] (/ CSS / селекторы / атрибуты / равенство)	[css / селекторы / атрибуты / существование] (/ css / селекторы / атрибуты / существование)	[css / селекторы / атрибуты / дефис] (/ css / селекторы / атрибуты / дефис)
[css / селекторы / атрибуты / префикс] (/ css / селекторы / атрибуты / префикс)	[css / селекторы / атрибуты / подстрока] (/ css / селекторы / атрибуты / подстрока)	[css / селекторы / атрибуты / суффикс] (/ css / селекторы / атрибуты / суффикс)
[css / селекторы / атрибуты / пробел] (/ css / селекторы / атрибуты / пробел)	[css / selectors / border-image] (/ css / selectors / border-image)	[CSS / селекторы / класс] (/ CSS / селекторы / класс)
[css / selectors / селектор классов] (/ css / selectors / class_selector)	[css / селекторы / комбинаторы / смежный брат] (/ css / селекторы / комбинаторы / смежный_сиблинг)	[CSS / селекторы / комбинаторы / дочерний элемент] (/ CSS / селекторы / комбинаторы / дочерний элемент)
[CSS / селекторы / комбинаторы / потомок] (/ CSS / селекторы / комбинаторы / потомок)	[css / селекторы / комбинаторы / общие родственники] (/ css / selectors / комбинаторы / general_sibling)	[css / selectors / cursor] (/ css / selectors / cursor)
[css / selectors / id selector] (/ css / selectors / id_selector)	[css / selectors / outline] (/ css / selectors / outline)	[CSS / селекторы / цвет контура] (/ css / селекторы / цвет контура)
[CSS / селекторы / стиль контура] (/ css / селекторы / стиль контура)	[CSS / селекторы / ширина контура] (/ CSS / селекторы / ширина контура)	[css / selectors / псевдоклассы] (/ css / selectors / псевдоклассы)
[css / selectors / псевдоклассы /: — ms-input-placeholder] (/ css / selectors / псевдоклассы /: — ms-input-placeholder)	[css / selectors / псевдоклассы /: active] (/ css / selectors / псевдоклассы /: active)	[css / selectors / псевдоклассы /: проверено] (/ css / selectors / псевдоклассы /: проверено)
[css / selectors / псевдоклассы /: отключено] (/ css / selectors / псевдоклассы /: отключено)	[css / selectors / псевдоклассы /: пусто] (/ css / selectors / псевдоклассы /: пусто)	[css / selectors / псевдоклассы /: включено] (/ css / selectors / псевдоклассы /: включено)
[css / selectors / псевдоклассы /: первый ребенок] (/ css / selectors / псевдоклассы /: первый ребенок)	[css / selectors / pseudo-classes /: first-of-type] (/ css / selectors / pseudo-classes /: first-of-type)	[css / selectors / псевдоклассы /: focus] (/ css / selectors / псевдоклассы /: focus)
[css / selectors / псевдоклассы /: hover] (/ css / selectors / псевдоклассы /: hover)	[css / selectors / псевдоклассы /: в диапазоне] (/ css / selectors / псевдоклассы /: в диапазоне)	[css / selectors / псевдоклассы /: неопределенный] (/ css / selectors / псевдоклассы /: неопределенный)
[css / selectors / псевдоклассы /: недопустимые] (/ css / selectors / псевдоклассы /: недопустимы)	[css / selectors / псевдоклассы /: lang (c)] (/ css / selectors / псевдоклассы /: lang (c))	[css / selectors / псевдоклассы /: last-child] (/ css / selectors / псевдоклассы /: last-child)
[css / selectors / pseudo-classes /: last-of-type] (/ css / selectors / pseudo-classes /: last-of-type)	[css / selectors / псевдоклассы /: ссылка] (/ css / selectors / псевдоклассы /: ссылка)	[css / selectors / псевдоклассы /: не] (/ css / selectors / псевдоклассы /: нет)
[css / селекторы / псевдоклассы /: nth-child (n)] (/ css / selectors / псевдоклассы /: nth-child (n))	[css / selectors / псевдоклассы /: nth-last-child (n)] (/ css / selectors / псевдоклассы /: nth-last-child (n))	[css / selectors / псевдоклассы /: nth-last-of-type (n)] (/ css / selectors / псевдоклассы /: nth-last-of-type (n))
[css / selectors / псевдоклассы /: nth-of-type (n)] (/ css / selectors / псевдоклассы /: nth-of-type (n))	[css / selectors / псевдоклассы /: only-child] (/ css / selectors / псевдоклассы /: only-child)	[css / selectors / pseudo-classes /: only-of-type] (/ css / selectors / pseudo-classes /: only-of-type)
[css / selectors / псевдоклассы /: необязательно] (/ css / selectors / псевдоклассы /: необязательно)	[css / selectors / псевдоклассы /: требуется] (/ css / selectors / псевдоклассы /: требуется)	[css / selectors / псевдоклассы /: root] (/ css / selectors / псевдоклассы /: root)
[css / selectors / псевдоклассы /: target] (/ css / selectors / псевдоклассы /: target)	[css / selectors / псевдоклассы /: допустимые] (/ css / selectors / псевдоклассы /: допустимые)	[css / selectors / псевдоклассы /: посещены] (/ css / selectors / псевдоклассы /: посещены)
[css / selectors / псевдоклассы / Динамические псевдоклассы] (/ css / selectors / псевдоклассы / Dynamic_pseudo-классы)	[css / selectors / псевдоклассы / Структурные псевдоклассы] (/ css / selectors / псевдоклассы / Structural_pseudo-классы)	[css / selectors / псевдоклассы / псевдоклассы состояний элементов пользовательского интерфейса] (/ css / selectors / псевдоклассы / ui_element_states_pseudo-classes)
[css / selectors / псевдоэлементы] (/ css / selectors / псевдоэлементы)	[css / selectors / псевдоэлементы / :: after] (/ css / selectors / псевдоэлементы / :: after)	[css / selectors / псевдоэлементы / :: before] (/ css / selectors / псевдоэлементы / :: before)
[css / selectors / псевдоэлементы / :: first-letter] (/ css / selectors / псевдоэлементы / :: first-letter)	[css / selectors / псевдоэлементы / :: first-line] (/ css / selectors / псевдоэлементы / :: first-line)	[css / selectors / псевдоэлементы / :: region] (/ css / selectors / псевдоэлементы / :: region)
[css / selectors / псевдоэлементы / :: selection] (/ css / selectors / псевдоэлементы / :: selection)	[css / selectors / type] (/ css / selectors / type)	[css / selectors / универсальный селектор] (/ css / selectors / universal_selector)
[css / selectors / user-select] (/ css / selectors / user-select)	[css / selectors / zoom] (/ css / selectors / zoom)

## Связанные спецификации

Селекторы уровня 3

Рекомендация

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

— синтаксис каскадных таблиц стилей

Селекторы элементов — синтаксис каскадных таблиц стилей

Что это такое?

Эти селекторы определяют часть дерева документа на основе
в его контексте по отношению к другим элементам.

Селектор пространства имен

[ CSS3 ]
[ N6 | O7 ]

Описание:

Этот синтаксис позволяет адресовать отдельные пространства имен XML в CSS.
селекторы. Эта возможность будет важна, поскольку количество XML
диалектов в сети в будущем станет больше.

Синтаксисы:
1: Ссылка на элементы в определенном пространстве имен
[ПРЕФИКС NAMESPACE] | [НАЗВАНИЕ ЭЛЕМЕНТА]
{[Блок объявления]}
2.Ссылка на элементы в любом пространстве имен:
* | [НАЗВАНИЕ ЭЛЕМЕНТА]
{[Блок объявления]}
Или, если нет пространства имен по умолчанию
объявлен, его можно просто записать как:
[ИМЯ ЭЛЕМЕНТА] {[Блок объявления]}
3. Ссылка на элементы без какого-либо объявленного пространства имен:
| [ИМЯ ЭЛЕМЕНТА]
{[Блок объявления]}

Примеры:

1: foo | книга
{ красный цвет }
[соответствует всем вхождениям элемента ‘book’ в пространстве имен ‘foo’]
2: * | book
{ красный цвет }
[соответствует всем вхождениям элемента ‘book’ в любом пространстве имен]
3: | book
{ красный цвет }
[соответствует всем вхождениям элемента ‘book’ без объявленных пространств имен]

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

[ CSS2 | CSS2.1 | CSS3 ]
[ IE5 | N6 | O4 ]

Описание:

Это особый тип селектора, используемый для сопоставления любого элемента.
Универсальный селектор может быть исключен из простого селектора.
если это не единственный компонент (например: ‘*: first-line’ — это
то же, что и ‘: first-line’.) Этот тип селектора позволяет
мощное сопоставление обобщенных структур в общих языках
как XML, где имена элементов не обязательно известны заранее
время для таблицы стилей.

Синтаксис:

* {[Блок объявления]}

Пример:

* [foo]
{ красный цвет }
[соответствует всем вхождениям атрибута ‘foo’ в документе]

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

[ CSS1 | CSS2 | CSS2.1 | CSS3 ]
[ IE3 | N4 | O3.5 | S1 ]

Описание:

Этот селектор явно указывает имя элемента в
дерево документа. Все вхождения имени элемента в
документ сопоставлен.

Синтаксис:

[Имя элемента] {[Блок объявления]}

Пример:

h3
{font-size: 2em}
[Соответствует всем вхождениям элемента с именем ‘h3’. Это также будет соответствовать
элементы с именем «h3» в HTML, но не в XML]

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

[ CSS1 | CSS2 | CSS2.1 | CSS3 ]
[ IE3 | N4 | O3.5 | S1 ]

Описание:

Также известен как «контекстный селектор» в CSS1. Этот селектор позволяет
элемент, который должен быть сопоставлен на основе его происхождения в дереве документа.
Имена двух элементов перечислены через пробел. В
элемент слева является прямым или косвенным предком элемента
вправо через произвольную глубину вложенности.

Синтаксис:

[Element1] S + [Element2]
{[Блок объявления]}

Пример:

h4 высотой
{font-weight: bold}
[соответствует
< h4 > привет < em > там em > h4 >
и
< h4 > привет
< b > < em > там em > b > h4 >]

Селектор детей

[ CSS2 | CSS2.1 | CSS3 ]
[ N6 | O3.5 | S1 ]

Описание:

В отличие от обобщенного селектора потомков, этот селектор
таргетинг только на элементы, которые имеют прямые отношения родитель / потомок
в дереве документа. Имена двух элементов перечислены, разделены
символом «>» (пробелы по обе стороны от «>»
необязательно.) Имя элемента слева является прямым родительским элементом
элемента справа.

Синтаксис:

[Element1] «>» [Element2]
{[Блок объявления]}

Пример:

h4> em
{font-weight: bold}
[соответствует
< h4 > привет
< em > там em > h4 >
но не
< h4 > привет
< b > < em > там em > b > h4 >]

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

[ CSS2 | CSS2.1 | CSS3 ]
[ N6 | O5 | S1 ]

Описание:

Этот селектор сопоставляет два элемента с одним и тем же прямым родителем
элемент в дереве документа, И существуют рядом друг с другом в
дерево документов. Имена двух элементов перечислены, разделены
символом «+» (пробелы по обе стороны от «+» необязательны).
Оба элемента имеют общего родителя, и имя элемента на
left непосредственно предшествует элементу справа в дереве документа.

Синтаксис:

[Element1] «+» [Element2]
{[Блок объявления]}

Пример:

б + я
{font-weight: bold}
[соответствует
< h4 > < b > привет b > там < i > мир i > h4 >
но нет

< h4 > < b > привет b > < tt > там tt > < i > мир i > h4 >]

Особенности браузера

• Netscape

  4.х +:

  — Применение правил стиля к явным дочерним селекторам (CSS1:
  контекстные селекторы) к элементам с внутренней подструктурой
  (например, списки и таблицы) не выполняется (например: ‘UL LI UL’ не применяется
  во вложенный список, но «ul ul» успешно.)

• Opera

  3,5+:

  — Если родительский элемент в селекторе потомков (CSS1:
  контекстный селектор) не существует, правило стиля все равно будет
  применяться к указанному дочернему элементу.

Расточка Авторские права ….


Модуль 10 — страница 09

Модуль 10 — страница 09 — Базовый синтаксис CSS: контекстные селекторы

Базовый синтаксис CSS: контекстные селекторы

Контекстные селекторы позволяют определять внешний вид тегов HTML в родительско-дочерних отношениях с другими тегами HTML. В следующем примере я создал два экземпляра тега B (полужирный): один сам по себе и один, где он появляется как дочерний объект тега P (абзац).

Пример:

 Вот жирный текст. 

 Вот абзац со словом  жирным шрифтом . 
 

Теперь я мог бы сделать одно объявление CSS, которое будет определять все экземпляры тега B единообразно, как я делал раньше:

b {font-weight: жирный; цвет: # 000000; }
 

Но что, если я хочу, чтобы тег B , когда он появляется как дочерний элемент тега P , выглядел иначе, чем тег B сам по себе? Внешний вид этих тегов B можно определить отдельно с помощью контекстного селектора в объявлении CSS.

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

Общий пример:

parenttagname childtagname {свойство: значение; так далее... }
 

Фактический пример (определение тега B , когда он является дочерним по отношению к тегу P ):

п б {цвет: # 660066; font-weight: жирный; }
 

Используя контекстные селекторы, я могу определить, как будет выглядеть HTML-тег, когда он В КОНТЕКСТЕ другого конкретного HTML-тега (другими словами, когда он является дочерним по отношению к другому тегу).Например, я могу определить тег B как дочерний элемент тега P отдельно от тега B как дочерний элемент тега TH ; Я могу определить внешний вид тега на основе его КОНТЕКСТА, отсюда и термин Селектор КОНТЕКСТ.

Я могу определить свойства тега B в целом, и я могу ТАКЖЕ более конкретно переопределить некоторые или все эти свойства, когда тег B появляется как дочерний по отношению к тегу P .

Пример:

b {font-weight: жирный; цвет: # 000000; }
п б {цвет: # 660066; }
 

В первом объявлении CSS выше я сказал браузеру сделать тег B жирным и черным.Во втором объявлении я использовал контекстный селектор, чтобы указать браузеру, что тег B (когда он появляется как дочерний элемент тега P ) отображается темно-фиолетовым. Поскольку я СНОВА не указал свойство font-weight во втором объявлении CSS выше, тег B как дочерний элемент тега P НАСЛЕДУЕТ свойство font-weight (boldness) из общего объявления тега B .

Помните, что : вы можете определить основные свойства тега в общем объявлении (например, для тега B выше), а затем переопределить одно или несколько свойств, определенных для тега в различных КОНТЕКСТАХ (ситуациях), используя контекстные селекторы в объявлениях CSS, как вы также можете видеть выше.

При создании контекстных селекторов вы ДОЛЖНЫ разделять разные селекторы пробелами. Следующий пример НЕПРАВИЛЬНО:

pb {color: # 660066; }
 

Я НЕ использовал контекстный селектор в приведенном выше примере; Вместо этого я сделал объявление CSS для какого-то несуществующего тега под названием "pb" , который не принесет нам никакой пользы.

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

Пример:

б {цвет: # 000000; }
п б {цвет: # 660066; }
таблица tr td b {цвет: # 006600; }
таблица tr td p b {цвет: # 000066; }
 

В приведенном выше примере я определил тег B :

1. сам по себе черный
2. в контексте тега P как темно-фиолетовый
3. в контексте ячейки TD в ТАБЛИЦЕ темно-зеленым
4. в контексте P в ячейке TD в ТАБЛИЦЕ как темно-синий

Пример:

таблица tr td {цвет: # 000000; }
таблица tr th {color: # 660066; }
таблица tr td table tr td {цвет: # 006600; }
таблица tr th таблица tr td {цвет: # 000066; }
 

В приведенном выше примере я определил цвет текста в ячейках TD и TH в ТАБЛИЦЕ (черный текст для TD, темно-фиолетовый текст для TH).Я также определил цвет текста в ячейках TD для ТАБЛИЦЫ, вложенной в тег TD в другой ТАБЛИЦЕ, в отличие от следующего объявления, где я определил цвет текста в ячейках TD для ТАБЛИЦЫ, вложенной в тег TH другого ТАБЛИЦА; Итак, я различаю ячейки TD таблиц, вложенных в теги TD, и ячейки TD таблиц, вложенных в теги TH. Как видите, я могу уточнить различия во внешнем виде тегов в разных контекстах, используя объявления CSS и контекстные селекторы.

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

Я бы также использовал такой контекстный селектор при определении внешнего вида списка и подсписка:

ул ли {список-стиль-тип: диск; }
уль уль ли {список-стиль-тип: квадрат; }
 

В приведенном выше примере я определил тег LI для неупорядоченного списка, чтобы использовать маркер дискового типа, а тег LI для вложенного неупорядоченного списка (или подсписка) использовал квадратный тип. пуля.

Контекстные селекторы предоставляют очень мощный механизм для различения внешнего вида тега в зависимости от контекста тега. Есть также другой способ различать теги, используя так называемый КЛАСС; мы обсудим классы в следующем разделе.

Авторские права © 2001 Майкл Масумото. Все права защищены.

Селектор детей

Селектор детей

Web Review
Июнь 2000 г.

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

Как это работает

Использовать дочерний селектор довольно просто. Он написан с использованием символа «больше» (> ) и должен находиться между двумя другими селекторами.Например:

 body> p {color: green;}
 

Это правило сделает зеленым любой абзац, который является прямым потомком элемента body . Следовательно, любой абзац, который является дочерним по отношению к другому элементу, например, div или ячейке таблицы, не будет соответствовать этому правилу.

Чем это отличается от традиционных контекстных селекторов? Разница в том, что для селектора, такого как bodyp , будет сопоставлен любой абзац, который является потомком body .Конечно, это может означать дочерний абзац, но это также может означать абзац, который содержится внутри ячейки таблицы, которая находится внутри таблицы , которая является частью div . Контекстные селекторы можно легко назвать селекторами потомков , поскольку они определяют, какие потомки каких элементов могут быть выбраны.

Выбор точных потомков

Объединив дочерние селекторы вместе, можно очень точно нацелить определенные элементы на определенные точки документа.Например, предположим, что мы хотим выбрать любой абзац, который является дочерним для элемента div , который сам является дочерним элементом элемента div , который является дочерним элементом элемента body . Кроме того, мы хотим сделать эти абзацы салатово-зелеными на голубом фоне. Таким образом мы пишем:

body> div> div> p {цвет: салатовый; фон: голубой;}
 

Это подействует именно на те параграфы, которые описаны выше, и никакие другие. Если у нас есть параграф, вложенный в три div s, он не будет выбран; также не будет абзац внутри div , который является дочерним элементом body элемента.

Дети и потомки

Для тех, кого смущает разница между детьми и потомками, давайте на минутку рассмотрим это. Однако, чтобы понять это, нам нужно ввести понятие «древовидного представления» для данного документа. Документы HTML, как и большинство структурированных документов любого типа, основаны на иерархии элементов, которая наиболее заметна в древовидной структуре документа. В этой иерархии каждый элемент вписывается в общую структуру документа, и каждый элемент является либо родительским, либо дочерним для другого элемента, а часто и тем и другим.См. Рисунок 1 для примера дерева документа.

Рисунок 1: Схема иерархии элементов.

Во-первых, давайте поговорим об отношениях между родителями и детьми. На рисунке 1 элемент body имеет двух дочерних элементов: элемент p и элемент ul . Элемент p , в свою очередь, имеет двух дочерних элементов: em и strong элементов непосредственно под ним на дереве.Элемент p имеет одного родителя, и это элемент body . Фактически, у элемента может быть только один родительский элемент, хотя у него может быть много дочерних элементов.

Теперь о предках и потомках. Возьмите якорь , элемент . У него три предка: сильный , p и body . Когда мы поднимаемся вверх по дереву к верхнему уровню, каждый элемент, который мы передаем, является предком элемента, с которого мы начали. Обратный путь сложнее: чтобы найти потомков, мы должны пройти все ветви вниз от нашей начальной точки.Таким образом, для абзаца, элемента p , потомками будут: em , strong , a и em .

Таким образом, чтобы выбрать элемент a с помощью дочернего селектора, нам нужно написать strong> a . Что-то еще, например p> , не будет соответствовать привязке, потому что это не дочерний элемент абзаца.

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

Дети в контексте

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

 div ol> li em {color: purple;}
 

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

 
 

  
 Текст em здесь  не  фиолетового цвета. 
 
 

  

   
 Смотрите, список:
    

     
 Здесь выделенный текст   фиолетовый. 
    
   
  
 
 
 

Пурпурный текст em фиолетовый, потому что это правнук элемента li , который является прямым потомком ol , а ol является внуком элемента body .Первый em не соответствует, потому что его прародитель ol не является прямым потомком div .

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

 body> ol> li {color: silver;} 
 
 

  
 Текст здесь серебристый. 
 
 

  

   
 Смотрите, список (и этот текст, кстати, не серебряный):
    

     
 Текст здесь  не  серебристого цвета.
    
   
  
 

 
 

Первый элемент списка в источнике — silver, потому что он дочерний элемент упорядоченного списка, который сам является дочерним элементом тела . Второй элемент списка в источнике является дочерним по отношению к неупорядоченному списку, поэтому он не может соответствовать правилу. Наконец, третий элемент списка в источнике является дочерним по отношению к упорядоченному списку, но элемент ol является дочерним элементом элемента li , поэтому он тоже не соответствует.

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

Звучит как название серии Star Trek , не так ли? В этом случае мы говорим об использовании универсального селектора в сочетании с дочерним селектором, который может дать некоторые интересные эффекты.

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

 body> * {font-weight: bold;}
 

С помощью этого правила вы можете легко увидеть, какие элементы находятся на «верхнем уровне» документа, а какие вложены в другие элементы.Вы можете расширить этот подход, чтобы выбрать только внуков тела :

 body> *> * {font-weight: bold;}
 

Теперь будут выбираться только те элементы, которые на один уровень ниже «верхнего уровня». Конечно, это не тот эффект, который нам понадобится очень часто, но мы могли бы выбрать только те элементы h2 , которые являются внуками тела , и так:

 body> *> h2 {font-style: italic;}
 

Мы также можем выбрать любого потомка элемента, который является потомком h2 , который является потомком div :

 div> h2> * *
 

Селекторы такого типа не всегда просты для понимания на первый взгляд, но после небольшой практики и некоторого строгого мышления они становятся достаточно ясными.

Поддержка браузера

Дочерний селектор поддерживается в Internet Explorer 5.x для Macintosh и Opera 3.6. Он также поддерживается в Netscape 6 Preview Release 1 для всех бесчисленных платформ, для которых он доступен, и в Preview Release 3 Opera 4 для Windows.

Еще не все

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

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

.

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт