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

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

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

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

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

Использование контекстных селекторов продемонстрировано в примере 10.1.

Пример 10.1. Контекстные селекторы

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Жирное начертание текста
 
Одновременно жирное начертание текста и выделенное цветом
  

В данном примере показано обычное применение тега и этого же тега, когда он вложен внутрь абзаца

. При этом меняется цвет и шрифт текста, как показано на рис. 10.1.

Рис. 10.1. Оформление текста в зависимости от вложенности тегов

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

Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определённого класса, как показано в примере 10.2.

Пример 10.2. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
Русская кухня | Украинская кухня | Кавказская кухня 
 
Другие материалы по теме
  

Результат данного примера показан на рис. 10.2.

Рис. 10.2. Ссылки разных цветов

В данном примере используется два типа ссылок. Первая ссылка, стиль которой задаётся с помощью селектора A , будет действовать на всей странице, а стиль второй ссылки ( .menu A ) применяется только к ссылкам внутри элемента с классом menu .

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

Вопросы для проверки

1. Какой цвет будет у текста списка в следующем коде?

2. В коде выше какого цвета будут маркеры перед текстом?

Источник

Контекстные селекторы CSS

Контекстные селекторы в CSS — это выборка потомков элемента.

Схема контекстного селектора выглядит следующим образом:

Между селекторами ставят пробел .

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

Рассмотрим следующий HTML-документ, красным цветом выделены ссылки:

Снежный барс
Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Достигая вместе с хвостом длины 200-230 см, весит до 55 кг. Окраска меха светлая дымчато-серая с кольцеобразными и сплошными тёмными пятнами.
Охотится снежный барс в основном на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется примерно около 10 тысяч особей. По состоянию на 2013 год охота на ирбисов запрещена.
Меню сайта

  
Снежный барс
  
Полярный волк
  
Полярная сова

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

Контекстные селекторы, могут состоять более чем из 2х тегов (селекторов), например если вы хотите назначить CSS-свойство элементу strong , находящемуся в стандартной ячейке таблицы, а остальные теги strong не трогать (например находящиеся в абзацах p), то ваш CSS-код может выглядеть следующим образом:

Если же вы хотите, чтобы свойства применялись, только в определённых таблицах, у которого есть атрибут класса class=»myTable» , то CSS-код, может выглядеть так:

И т.д., вариаций можно придумать множество.

PS: контекстные селекторы, также еще называют селекторами потомков (выборка потомков).

Источник

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

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

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

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

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

Использование контекстных селекторов продемонстрировано в примере 10.1.

Пример 10.1. Контекстные селекторы

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Жирное начертание текста
 
Одновременно жирное начертание текста и выделенное цветом
  

В данном примере показано обычное применение тега и этого же тега, когда он вложен внутрь абзаца

. При этом меняется цвет и шрифт текста, как показано на рис. 10.1.

Рис. 10.1. Оформление текста в зависимости от вложенности тегов

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

Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определённого класса, как показано в примере 10.2.

Пример 10.2. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
Русская кухня | Украинская кухня | Кавказская кухня 
 
Другие материалы по теме
  

Результат данного примера показан на рис. 10.2.

Рис. 10.2. Ссылки разных цветов

В данном примере используется два типа ссылок. Первая ссылка, стиль которой задаётся с помощью селектора A , будет действовать на всей странице, а стиль второй ссылки ( .menu A ) применяется только к ссылкам внутри элемента с классом menu .

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

Вопросы для проверки

1. Какой цвет будет у текста списка в следующем коде?

2. В коде выше какого цвета будут маркеры перед текстом?

Источник

Первый параграф в body

Правила контекстных селекторов также распространяются и на отношение родитель-ребенок.

x y{ свойство1: значение; свойство2: значение; }

x — селектор-предок, y — селектор-потомок
Правило будет действовать на селектор y

body> p>b>Жирное начертание текста/b>/p> p>i>b>Одновременно жирное начертание текста и выделенное цветом/b>/i>/p> /body>

Жирное начертание текста

Одновременно жирное начертание текста и выделенное цветом

Необходимо: Создать правило контекстных секторов для элемента b

="text/css"> p b{ font-family: Times, serif; /* Семейство шрифта */ font-weight: bold; /* Жирное начертание */ color: navy; /* Синий цвет текста */ } >

В примере отношение предок-потомок характерно для элементов p и b в третьей строке. Но контекстные селекторы распространяются и на отношения родитель-ребенок, т.е. в примере — элементы p и b во второй строке.

Рассмотрим еще примеры, иллюстрирующие использование контекстных селекторов:

Соседние селекторы CSS (братья)

x + y{ свойство1: значение; свойство2: значение; }

Стиль применяется для соседнего селектора y

p>b>Студенты/b> - это i>всезнающий/i> народ./p>

Студенты — это всезнающий народ.

Необходимо: Создать правило для соседнего селектора i

В примере теги i и b не перекрываются между собой другими элементами и поэтому представляют собой соседние селекторы. То, что они расположены внутри элемента p , никак не влияет на их отношение.

Дочерние селекторы в CSS (селектор родитель-ребенок)

x > y{ свойство1: значение; свойство2: значение; }

Здесь x — родитель, y — ребенок
Правило будет действовать на дочерний селектор y

div>i>Кто на горе/i>, тот раньше солнце встретит. /div> div>p>i>Кто средь друзей/i>, тот силой не шути./p> /div>

Необходимо: создать правило для дочернего селектора i (1 строка)

В третьей строке примера тег i не является дочерним для тега div , так как они перекрываются тегом p .

Задание: Создайте всевозможные правила для стилизации каждого из селекторов в расположенном ниже фрагменте кода:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

html> head> style type="text/css"> . /style> /head> body> h1 id="header1">i>Стихотворение/i> u>2013 год/u>/h1> h2>I/h2> p>В земные страсти вовлеченный, я знаю, что из тьмы на свет однажды выйдет ангел черный и крикнет, что спасенья нет. /p> h2>II/h2> p>Но простодушный и несмелый, прекрасный, как благая весть, идущий следом ангел белый прошепчет, что надежда есть./p> p class="end">Конец/p> h1>Продолжение следует/h1> /body> /html>

2013 год

I

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

II

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

Источник

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

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

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

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

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

Использование контекстных селекторов продемонстрировано в примере 10.1.

Пример 10.1. Контекстные селекторы

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Жирное начертание текста
 
Одновременно жирное начертание текста и выделенное цветом
  

В данном примере показано обычное применение тега и этого же тега, когда он вложен внутрь абзаца

. При этом меняется цвет и шрифт текста, как показано на рис. 10.1.

Рис. 10.1. Оформление текста в зависимости от вложенности тегов

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

Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определённого класса, как показано в примере 10.2.

Пример 10.2. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
Русская кухня | Украинская кухня | Кавказская кухня 
 
Другие материалы по теме
  

Результат данного примера показан на рис. 10.2.

Рис. 10.2. Ссылки разных цветов

В данном примере используется два типа ссылок. Первая ссылка, стиль которой задаётся с помощью селектора A , будет действовать на всей странице, а стиль второй ссылки ( .menu A ) применяется только к ссылкам внутри элемента с классом menu .

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

Вопросы для проверки

1. Какой цвет будет у текста списка в следующем коде?

2. В коде выше какого цвета будут маркеры перед текстом?

Источник