wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Дочерние селекторы: Дочерние селекторы | htmlbook.ru

alexxlab
No Comments

Содержание

Дочерние селекторы | htmlbook.ru

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

Пример 12.1. Вложенность элементов в документе

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Lorem ipsum</title>
 </head>
 <body>
  <div>
   <p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing 
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
   erat volutpat.</p>
   <p><strong><em>Ut wisis enim ad minim veniam</em></strong>, 
   quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
   ea commodo consequat.</p>
  </div>
 </body>
</html>

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

Рис. 12.1. Дерево элементов для примера

На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия.
Здесь дочерним элементом по отношению к тегу <div> выступает тег <p>. Вместе с тем тег <strong> не является дочерним для тега <div>, поскольку
он расположен в контейнере <p>.

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

Селектор 1 > Селектор 2 { Описание правил стиля }

Стиль применяется к Селектору 2, но только в том случае, если он является
дочерним для Селектора 1.

Если снова обратиться к примеру 12.1, то стиль вида P
> EM { color: red } будет установлен для первого абзаца документа,
поскольку тег <em> находится внутри контейнера <p>, и не даст никакого результата для второго
абзаца. А все из-за того, что тег <em> во втором
абзаце расположен в контейнере <strong>, поэтому
нарушается условие вложенности.

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

Пример 12.2. Контекстные и дочерние селекторы

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Дочерние селекторы</title>
  <style>
   DIV I { /* Контекстный селектор */
    color: green; /* Зеленый цвет текста */
   }
   P > I { /* Дочерний селектор */
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
  <div>
   <p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing 
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet <i>dolore magna</i> 
   aliguam erat volutpat.</p>
  </div>
 </body>
</html>

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

Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора

На тег <i> в примере действуют одновременно два правила: контекстный селектор (тег <i> расположен внутри <div>) и дочерний селектор (тег <i> является дочерним по отношению к <p>). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.

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

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

Рис. 12.3. Список в виде меню

Для размещения текста по горизонтали к селектору LI добавляется стилевое свойство float. Чтобы при этом
разделить между собой стиль горизонтального и вертикального списка и применяются
дочерние селекторы (пример 12.3).

Пример 12.3. Использование дочерних селекторов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Дочерние селекторы</title>
  <style>
   UL#menu {
    margin: 0; padding: 0; /* Убираем отступы */
   }
   UL#menu > LI {
    list-style: none; /* Убираем маркеры списка */
    width: 100px; /* Ширина элемента в пикселах */
    background: #b3d9d2; /* Цвет фона */
    color: #333; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт */
    font-size: 90%; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    float: left; /* Располагаем элементы по горизонтали */
   }
   LI > UL {
    list-style: none; /* Убираем маркеры списка */
    margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */
    border-bottom: 1px solid #666; /* Граница внизу */
    padding-top: 5px; /* Добавляем отступ сверху */
   }
   LI > A {
    display: block; /* Ссылки отображаются в виде блока */
    font-weight: normal; /* Нормальное начертание текста */
    font-size: 90%; /* Размер шрифта */
    background: #fff; /* Цвет фона */
    border: 1px solid #666; /* Параметры рамки */
    border-bottom: none; /* Убираем границу снизу */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <ul> 
   <li>Правка 
    <ul> 
      <li><a href="#">Отменить</a></li> 
      <li><a href="#">Вырезать</a></li> 
      <li><a href="#">Копировать</a></li> 
      <li><a href="#">Вставить</a></li> 
    </ul> 
   </li> 
   <li>Начертание
    <ul> 
      <li><a href="#">Жирное</a></li> 
      <li><a href="#">Курсивное</a></li> 
      <li><a href="#">Подчеркнутое</a></li> 
    </ul> 
   </li>
   <li>Размер
    <ul> 
      <li><a href="#">Маленький</a></li> 
      <li><a href="#">Нормальный</a></li> 
      <li><a href="#">Средний</a></li> 
      <li><a href="#">Большой</a></li> 
    </ul> 
   </li> 
  </ul>
 </body>
</html>

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

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

1. Какой цвет будет у жирного курсивного текста в коде

<p>Нормы освещённости построены на <b><i>основе классификации зрительных работ</i></b> по определенным количественным признакам.</p>

При использовании следующего стиля?

P { color: green; }
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }

  1. Зелёный.
  2. Синий.
  3. Оранжевый.
  4. Оливковый.
  5. Жёлтый.

2. Какой элемент является родительским для тега <TITLE>?

  1. <HEAD>
  2. <BODY>
  3. <HTML>
  4. <META>
  5. <!DOCTYPE>

3. Для какого тега элемент <!DOCTYPE> выступает родителем?

  1. <HTML>
  2. <TITLE>
  3. <BODY>
  4. <HEAD>
  5. Ни для одного тега.

Ответы

1. Оливковый.

2. <HEAD>

3. Ни для одного тега.

Дочерние селекторы | CSS | WebReference

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Какой элемент выступает родителем, а какой его потомком легко выяснить с помощью дерева элементов — так называется структура отношений элементов документа между собой (рис. 1).

Рис. 1. Дерево элементов

На рис. 1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к <div> выступает элемент <p>. Вместе с тем <strong> не является дочерним для элемента <div>, поскольку он расположен в контейнере <p>.

Синтаксис 

E > F { Описание правил стиля }

Стиль применяется к элементу F, только когда он является дочерним для элемента E.

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Дочерние селекторы</title>
<style>
#menu {
margin: 0; padding: 0; /* Убираем отступы */
}
#menu > li {
list-style: none; /* Убираем маркеры списка */
width: 100px; /* Ширина элемента в пикселах */
background: #b3d9d2; /* Цвет фона */
color: #333; /* Цвет текста */
padding: 5px; /* Поля вокруг текста */
font-family: Arial, sans-serif; /* Рубленый шрифт */
font-size: 90%; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
float: left; /* Располагаем элементы по горизонтали */
}
li > ul {
list-style: none; /* Убираем маркеры списка */
margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */
border-bottom: 1px solid #666; /* Граница внизу */
padding-top: 5px; /* Добавляем отступ сверху */
}
li > a {
display: block; /* Ссылки отображаются в виде блока */
font-weight: normal; /* Нормальное начертание текста */
font-size: 90%; /* Размер шрифта */
background: #fff; /* Цвет фона */
border: 1px solid #666; /* Параметры рамки */
border-bottom: none; /* Убираем границу снизу */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<ul>
<li>Правка
<ul>
<li><a href=»undo.html»>Отменить</a></li>
<li><a href=»cut.html»>Вырезать</a></li>
<li><a href=»copy.html»>Копировать</a></li>
<li><a href=»paste.html»>Вставить</a></li>
</ul>
</li>
<li>Начертание
<ul>
<li><a href=»bold.html»>Жирное</a></li>
<li><a href=»italic.html»>Курсивное</a></li>
<li><a href=»underline.html»>Подчеркнутое</a></li>
</ul>
</li>
<li>Размер
<ul>
<li><a href=»small.html»>Маленький</a></li>
<li><a href=»normal.html»>Нормальный</a></li>
<li><a href=»middle.html»>Средний</a></li>
<li><a href=»big.html»>Большой</a></li>
</ul>
</li>
</ul>
</body>
</html>

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

Рис. 2. Использование дочерних селекторов

Примечание

Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (li > /* больше */ a).

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

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

CSS селекторы

Значение и применение

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

Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента <h3> и <p> являются дочерними по отношению к <body>, но элемент <i> при этом не является дочерним для элемента <body>, так как он расположен внутри тега <p>, и является дочерним именно для него.

Дочерние элементы в HTML документе.

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

CSS синтаксис:

element > element {
блок объявлений;
}

Версия CSS

CSS2

Пример использования

Перед нами стоит задача стилизовать гиперссылку (элемент <a>), который выделен оранжевым цветом на изображении:

Задача выбора элемента на странице.

При использовании селектора потомков body a приведет к выбору всех элементов <a>, так как они являются вложенными по отношению к элементу <body>, если мы используем селектор потомков p a, то это приведет к выбору двух элементов <a>, которые вложены внутри элементов <p>, так как они оба являются его потомками.

В нашем случае, как никогда лучше подойдет селектор дочерних элементов, благодаря которому мы можем добраться до необходимого нам элемента <a> самым простым способом.

p > a { /* выбирает любой элемент <a> дочерний по отношению к <p> */
блок объявлений;
}

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор дочерних элементов</title>
<style>
p>a { /* селектор дочерних элементов (выбираем дочерние <а>, вложенные в <p>) */
color: orange; /* устанавливаме цвет текста */
font-size: /* устанавливаме размер текста текста */
}
p a { /* селектор потомков (выбираем все потомки <a>, вложенные в <p>) */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}
</style>
</head>
	<body>
		<p><a href = "https://ru.wikipedia.org/">Ссылка</a> внутри &amplt;p&ampgt;.</p>
		<a href = "https://ru.wikipedia.org/">Ссылка</a> внутри &amplt;body&ampgt;.
		<p><span><a href = "https://ru.wikipedia.org/">Ссылка</a></span> внутри элемента &amplt;p&ampgt;, вложенного в элемент &amplt;p&ampgt;.</p>
	</body>
</html>

В этом примере с использованием селектора дочерних элементов мы выбрали все дочерние <a>, вложенные в <p> (один элемент), а с помощью селектора потомков стилизовали все потомки <a>, вложенные в <p> (убрали декорирование текста у двух элементов).

Результат нашего примера:

Пример использования селектора дочерних элементов.CSS селекторы

Дочерние селекторы в CSS

Вы здесь:
Главная — CSS — CSS Основы — Дочерние селекторы в CSS


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

Чтобы проблема стала более понятной, давайте приведу небольшой пример. Пусть у нас есть такой HTML-код:


<div>

  <div>

    <p>Первый абзац</p>

  </div>

  <p>Второй абзац</p>

</div>

И наша задача сделать красным только «Второй абзац«. Если мы напишем с использованием контекстного селектора:


.container p {

  color: red;

}

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


.container > p {

  color: red;

}

Всё, теперь красным у нас стал только «Второй абзац«. Поскольку именно данный абзац является непосредственно дочерним для .container. А «Первый абзац» является дочерним для внутреннего div, таким образом, под действие дочернего селектора он не попадает.

Вот так легко решаются такие задачи, однако, есть один огромный минус дочерних селекторов в CSS — они не работают в браузерах Internet Explorer. По этой причине, их использование крайне нежелательно. Но если Вы вдруг где-нибудь встретите, то теперь Вы будете знать, что означает данный тип селекторов и что он делает.


  • Создано 20.02.2012 09:54:47



  • Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):


  1. Кнопка:

    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:


  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

CSS: дочерние селекторы.

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

Давайте рассмотрим пример простого html-кода:

<!DOCTYPE html>
<html>
<head>
	<title>Дочерние элементы.</title>
</head>
<body>
	<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p>
	<p>Тут <b>жирный</b> и <u><i>подчёркнутый и наклонный</i></u> элементы.</p>
</body>
</html>

В этом коде два абзаца. Внутри абзацев расположены строчные элементы <b>, <i> и <u>. Во втором абзаце тег <i> вложен в тег <u>.

Теперь давайте к этому html-коду добавим CSS-стили с использованием дочерних селекторов.

Синтаксис дочерних селекторов:

Селектор 1 > Селектор 2 { Свойство: значение; }

Вот обновлённый код:

<!DOCTYPE html>
<html>
<head>
	<title>Дочерние элементы.</title>
	<style>
		p>b { color: red; }
		p>i { color: blue; }
	</style>
</head>
<body>
	<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p>
	<p>Тут <b>жирный</b> и <u><i>подчёркнутый и наклонный</i></u> элементы.</p>
</body>
</html>

Итак, вспомним: дочерний элемент — это элемент вложенный непосредственно в родительский. То есть, дочерний элемент — это потомок первого уровня. Давайте обратим внимание на тег <i>, в первом абзаце он вложен в тег <p>, а во втором он вложен в тег <u>, хотя также является потомком тега <p>. Поэтому во втором абзаце CSS правило для дочернего селектора p>i { color: blue; } не сработает — наклонный текст второго абзаца не будет отображён синим цветом.

Рисунок 1. Работа примера №1.

Добраться к html-элементу <i> второго абзаца можно используя CSS-правило: p>u>i { color: blue; }.

Давайте при помощи такого правила зададим наклонному тексту второго абзаца жёлтый цвет.

<!DOCTYPE html>
<html>
<head>
	<title>Дочерние элементы.</title>
	<style>
		p>b   { color: red; }
		p>i   { color: blue; }
		p>u>i { color: yellow; }
	</style>
</head>
<body>
	<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p>
	<p>Тут <b>жирный</b> и <u><i>подчёркнутый и наклонный</i></u> элементы.</p>
</body>
</html>

Этот стиль сработает и наклонный текст во втором абзаце будет отображён жёлтым цветом.

Рисунок 2. Работа примера №2.

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

У нас есть html-код:

<!DOCTYPE html>
<html>
<head>
	<title>Дочерние элементы.</title>
</head>
<body>

<ul>
	<li>Правка
	<ul>
		<li><a href="#">Отменить</a></li>
		<li><a href="#">Вырезать</a></li>
		<li><a href="#">Копировать</a></li>
		<li><a href="#">Вставить</a></li>
	</ul>
	</li>
	<li>Начертание
	<ul>
		<li><a href="#">Жирное</a></li>
		<li><a href="#">Курсивное</a></li>
		<li><a href="#">Подчеркнутое</a></li>
	</ul>
	</li>
	<li>Размер
	<ul>
		<li><a href="#">Маленький</a></li>
		<li><a href="#">Нормальный</a></li>
		<li><a href="#">Средний</a></li>
		<li><a href="#">Большой</a></li>
	</ul>
	</li>
</ul>

</body>
</html>

По умолчанию он интерпритируется так:

Задача: при помощи CSS превратить этот список в горизонтальное меню.

Рисунок 3. Цель преобразований.

Вот решение этой задачи с использованием дочерних селекторов:

<!DOCTYPE html>
<html>
<head>
	<title>Дочерние элементы.</title>
	<style>
		ul{
			list-style-type: none; /* убираем маркеры списков */
		}
		ul.menu > li{
			float: left; /* разещаем список горизонтально */
			background-color: #C5E7CC;
			font-weight: bold;
		}
		ul.menu > li > ul{
			margin: 4px;
			padding: 0; /* Убираем отступ внутри слева */
		}
		ul.menu > li > ul > li{
			border: 1px solid grey;
			background-color: white;
			padding: 4px;
			font-weight: normal;

		}
		a{
			color: blue;
		}
	</style>
</head>
<body>

<ul>
	<li>Правка
	<ul>
		<li><a href="#">Отменить</a></li>
		<li><a href="#">Вырезать</a></li>
		<li><a href="#">Копировать</a></li>
		<li><a href="#">Вставить</a></li>
	</ul>
	</li>
	<li>Начертание
	<ul>
		<li><a href="#">Жирное</a></li>
		<li><a href="#">Курсивное</a></li>
		<li><a href="#">Подчеркнутое</a></li>
	</ul>
	</li>
	<li>Размер
	<ul>
		<li><a href="#">Маленький</a></li>
		<li><a href="#">Нормальный</a></li>
		<li><a href="#">Средний</a></li>
		<li><a href="#">Большой</a></li>
	</ul>
	</li>
</ul>

</body>
</html>

Для лучшего понимания этого примера читайте:

  • Как разместить элементы списка горизонтально?

seodon.ru | Учебник CSS — Дочерние селекторы CSS

Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

Дочерние селекторы CSS — это селекторы, которые используются для применения стилей к элементам только в тех случаях, когда они являются дочерними по отношению к другим (родительским) элементам. Как и селекторы потомков, дочерние селекторы являются составными и складываются из простых селекторов (классы, идентификаторы и т.д.).

И снова, если вы забыли, что такое дочерние элементы, то давайте вспомним, разобрав уже знакомый вам пример.

<тег1>
 <тег2>...</тег2>
 <тег3><тег4>...</тег4></тег3>
</тег1>

Элемент называется дочерним по отношению к другому элементу, если он находится внутри него на первом уровне вложенности. В нашем примере <тег2> и <тег3> являются дочками <тег1>, а <тег4> — это дочка <тег3>.

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

селектор1 > селектор2 { свойство: значение; свойство: значение; … }

Пробелы с обоих сторон знака «>» можно ставить, а можно и нет, по желанию.

Пример использования дочерних селекторов CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Дочерние селекторы</title>
  <style type="text/css">
   body > div {
    border: 2px green solid; /* стили рамки DIV, когда он дочка BODY */
    margin: 20px; /* размер внешних полей */
    padding: 0 10px; /* размер внутренних отступов */
   }
   div > div > p {
    color: blue; /* синий текст параграфов, когда они дочерние у DIV,
                    который является дочкой другого DIV */
   }
  </style>
 </head>
 <body>
  <div>
   <div>
    <p>Параграф1.</p>
   </div>
  </div>
  
  <div>
   <p>Параграф2.</p>
  </div>
 </body>
</html>

Результат в браузере

В этом примере вам надо обратить внимание на два момента. Здесь имеется три элемента <DIV>, но только у двух из них есть рамки, отступы и поля. Почему? И второй момент. Только у первого параграфа синий цвет текста.

Internet Explorer 6.0 не понимает дочерние селекторы, поэтому, если вы создаете свой сайт с учетом этого старого браузера — помните об этом.

Дочерние селекторы в HTML-таблицах

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

<table>
 <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td></tr>
 <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td></tr>
</table>

А теперь вопрос. Как вы поступите, если вам понадобится с помощью дочерних селекторов пройти от тега <TABLE> к ячейкам? Если вы решили написать вот так, то это неверно:

table > tr > td { свойство: значение; свойство: значение; … }

А догадываетесь, почему неверно? Нет? Дело в том, что вы забыли еще про один элемент — <TBODY>, который даже если не указан явно, то все равно незримо присутствует в каждой HTML-таблице. Просто у него нет обязательных открывающих и закрывающих тегов, поэтому про него часто забывают. Кстати да, в HTML-учебнике мы его с вами не проходили, так как в реальности его явное указание редко когда нужно. Ну, думаю вы уже догадались, какая будет правильная запись, но я вам все же покажу.

table > tbody > tr > td { свойство: значение; свойство: значение; … }

Кстати, не только таблицы имеют элементы с необязательными открывающими тегами, есть и еще такие элементы. Просто на практике «проблемы забывчивости» возникают чаще всего именно с таблицами, поэтому я и заострил ваше внимание на этом.

Домашнее задание.

  1. Установите на странице шрифт Arial с размером 0.9em и какой-нибудь фон.
  2. Напишите на странице несколько заголовков и параграфов, измените размер и цвет текста заголовков так, как посчитаете нужным.
  3. Сделайте так, чтобы ссылки непосредственно в параграфах страницы были синего цвета без подчеркивания. Но при этом, если ссылки дополнительно обрамляются любым тегом, например <EM> для курсива, то они должны отображаться уже с подчеркиванием и красного цвета. Еще раз заостряю ваше внимание на том, что не надо прописывать стили ссылок с каждым обрамляющим тегом в отдельности, сделайте универсально. Как? Подумайте.
  4. Создайте небольшое меню в правой части страницы и зафиксируйте его, для этого вам понадобится свойство position и еще парочка сопутствующих ему свойств, там разберетесь. При этом, пусть меню не только остается на месте в пределах окна браузера, но и при скроллинге не наползает на содержимое страницы.

Думаю последний пункт урока будет для вас самым сложным, но не пытайтесь сразу полностью погрузиться в освоение позиционирования. Просто сделайте домашнее задание. Кстати, этот пункт не будет работать в Internet Explorer 6.0, так как старичек не понимает фиксированное позиционирование.

Посмотреть результат → Посмотреть ответ

Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега

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

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

Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)

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

Первый комбинатор символ плюс (+) или соседний селектор. Плюс устанавливается между двумя селекторами:

<селектор 1> + <селектор 2> { <стиль> }

Стиль в этом случае применяется к селектору 2, но только в том случае если он является соседним для селектора 1 и идет сразу после него. Рассмотрим пример:

 strong + i {
color: red; /* Красный цвет текста */
}
…
<p>Это обычный текст. <strong>Это жирный текст</strong>, обычный текст, <i>красный текст</i> к нему применилось правило соседних селекторов.</p>
<p>Это обычный текст. <strong>Это жирный текст</strong>, <span>обычный текст</span>, <i>и это обычный текст</i>.</p>

Результат:

Стиль описанный в примере будет применен только к первому тексту заключенному в тег <i>, т.к. он следует сразу же после тега <strong>.

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

<селектор 1> ~ <селектор 2> { <стиль> }

Стиль будет применен к селектору 2, который должен следовать за селектором 1. Рассмотри пример:

 strong ~ i {
color: red; /* Красный цвет текста */
}
…
<p>Это обычный текст. <strong>Это жирный текст</strong>, обычный текст, <i>красный текст</i> к нему применилось правило соседних селекторов.</p>
<p>Это обычный текст. <strong>Это жирный текст</strong>, <span>обычный текст</span>, <i>а это красный текст</i>.</p>

Результат:

Как видим, в этот раз правило стиля сработало для обоих текстов заключенных в тег <i>, несмотря на то, что во втором случае между тегом <strong> и <i> стоит тег <span>.

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

<селектор 1> > <селектор 2> { <стиль> }

Стиль будет привязан к селектору 2, который непосредственно вложен в селектор 1.

Пример:

div > strong {
font-style: italic /* Курсив */
}
…
<div>Это обычный текст. <strong>Это жирный курсивный текст </strong>.
<p>Это обычный текст. <strong>А это обычный жирный текст</strong>.</p>
</div>

И результат:

Как видно на рисунке, правило стиля подействовало только на первый тег <strong>, который непосредственно вложен в тег <div>. А непосредственным родителем второго тега <strong> является тег <p>, поэтому правило на него не действует.

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

<селектор 1> <селектор 2> { <стиль> }

Стиль будет применен к селектору 2, если он так или иначе вложен в селектор 1.

Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор:

div strong {
font-style: italic /* Курсив */
}
…
<div>Это обычный текст. <strong>Это жирный курсивный текст </strong>.
<p>Это обычный текст. <strong>А это тоже курсивный жирный текст</strong>.</p>
</div>
<p>Обычный текст и <strong>просто жирный текст</strong></p>

Результат:

Как видим, на этот раз правило подействовало на оба тега <strong>, даже на тот, который вложен и в контейнер <div> и в абзац <p>. На тег <strong>, который просто вложен в абзац <p> правило css никак не действует.

Селекторы по атрибутам тега

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

1. Простой селектор атрибута

Имеет вид:

<селектор>[<имя атрибута тега>] { <стиль> }

И привязывает стиль к тем элементам, внутри которых добавлен указанный атрибут. Например:

strong[title]{
color:red;
}
…
<p><strong>Автомобиль</strong> это механическое моторное безрельсовое <strong title=»транспортное средство»>дорожное транспортное средство</strong> минимум с 4 колёсами.</p>

Результат:

На рисунке можно заметить, что правило css (красный цвет текста) применяется к элементу strong, к которому добавлен атрибут title.

2. Селектор атрибута со значением

Синтаксис этого селектора следующий:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

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

a[target=»_blank»]{
color:red;
font-size:150%;
}
…
<p><a href=»//webcodius.ru» target=»_self»>Обычная ссылка</a> | <a href=»//webcodius.ru» target=»_blank»>Ссылка в новом окне</a></p>

Результат:

Как видим, оба элемента типа гиперссылка имеют атрибут target, но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу <a> у которого атрибут target имеет значение «_blank».

3. Одно из нескольких значений атрибута

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

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

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

[class~=»tel»]{
color:red;
font-size:150%;
}
…
<p>Наш телефон: <span>777-77-77</span></p>
<p>Наш адрес: <span>Москва ул. Советская 5</span></p>

Получиться следующий результат:

Правило применяется к элементу, у которого среди значений атрибута class имеется значение tel.

4. Дефис в значении атрибута

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

[атрибут|=»значение»] { стиль }
Селектор[атрибут|=»значение»] { стиль }

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

[class|=»menu»]{
color:red;
font-size:150%;
}
…
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>

Результат:

В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „.

5. Значение атрибута начинается с определенного текста

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

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

a[href^=»http://»]{
color:green;
font-weight:bold;
}
…
<p><a href=“//webcodius.ru»>Внешняя ссылка</a> | <a href=»/spravochnik-css/chto-takoe-css-i-kak-podklyuchit-kaskadnye-tablicy-stilej-k-html-dokumentu.html» target=»_blank»>Ссылка на внутреннюю страницу сайта</a></p>

Результат:

В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href начинается со значения http://.

6. Значение атрибута заканчивается определенным текстом

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

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

IMG[SRC$=gif] {
border: 5px solid red;
}
…
<p>Картинка формата gif</p>
<img src=»1.gif»>
<p>Картинка формата png</p>
<img src=»2.jpg»>

Результат:

В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей.

7. Значение атрибута содержит указанную строку

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

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

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

IMG[SRC*=gallery/] {
border: 5px solid red;
}
…
<p>Картинка из папки gallery</p>
<img src=»gallery/1.jpg»>
<p>Картинка из другой папки</p>
<img src=»2.jpg»>

Результат:

В примере стиль применяется к картинкам, которые загружены из папки «gallery».

На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой:

Селектор[атрибут1=»значение1″][атрибут2=»значение2″] { стиль }

Кроме того напомню о специальных селекторах CSS :

  • с помощью символов «+» и «~» формируются соседние селекторы;
  • символ «>» привязывает css стили к дочерним тегам;
  • символ <пробел> формирует контекстные селекторы.

В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.

На этом все, до новых встреч.

CSS-селектор — элемент с заданным потомком

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

.

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

Селектор Пример Описание примера
. класс .intro Выбирает все элементы с помощью
.class1.class2 .name1.name2 Выбирает все элементы с name1 и name2 set
в пределах своего атрибута класса
.класс1. класс2 .name1 .name2 Выбирает все элементы с именем 2 , который является потомком
элемент с именем 1
# id # имя Выбирает элемент с помощью
* * Выбирает все элементы
элемент p Выбирает все элементы

элемент.класс p.intro Выбирает все элементы

с

элемент, элемент div, p Выбирает все элементы

и все элементы

элемент элемент div p Выбирает все элементы

внутри элементов

элемент > элемент div> p Выбирает все элементы

, где родительский элемент

элемент + элемент div + p Выбирает все элементы

, которые помещаются сразу после элементов

элемент1 ~ элемент2 p ~ ul Выбирает каждый элемент

    , которому предшествует элемент

[ атрибут ] [цель] Выбирает все элементы с целевым атрибутом
[ атрибут = значение ] [target = _blank] Выбирает все элементы с target = «_ blank»
[ атрибут ~ = значение ] [название ~ = цветок] Выбирает все элементы с атрибутом title, содержащим слово «цветок».
[ атрибут | = значение ] [lang | = en] Выбирает все элементы со значением атрибута lang, начинающимся с «en»
[ атрибут ^ = значение ] a [href ^ = «https»] Выбирает каждый элемент , значение атрибута href которого начинается с «https»
[ атрибут $ = значение ] а [href $ = «.pdf »] Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf»
[ атрибут * = значение ] a [href * = «w3schools»] Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools».
: активный a: активный Выбирает активную ссылку
:: после ч :: после Вставить что-нибудь после содержимого каждого элемента

:: до p :: до Вставить что-нибудь перед содержимым каждого элемента

: проверено ввод: проверено Выбирает каждый проверенный элемент
: по умолчанию ввод: по умолчанию Выбирает элемент по умолчанию
: отключено вход: отключен Выбирает каждый отключенный элемент
: пусто p: пусто Выбирает каждый элемент

, не имеющий дочерних элементов (включая текстовые узлы).

: включено вход: включен Выбирает каждый активированный элемент
: первенец р: первенец Выбирает каждый элемент

, который является первым дочерним элементом своего родительского

:: первая буква п :: первая буква Выбирает первую букву каждого элемента

.

:: первая линия р :: первая линия Выбирает первую строку каждого элемента

: первый в своем роде р: первый в своем роде Выбирает каждый элемент

, который является первым элементом

его родительского

: фокус ввод: фокус Выбирает элемент ввода, имеющий фокус
: парение a: парение Выбирает ссылки при наведении указателя мыши на
: в пределах вход: в диапазоне Выбирает элементы ввода со значением в указанном диапазоне
: неопределенный ввод: неопределенный Выбирает элементы ввода, находящиеся в неопределенном состоянии
: недействительно ввод: недопустимый Выбирает все элементы ввода с недопустимым значением
: язык ( язык ) p: lang (it) Выбирает каждый элемент

с атрибутом lang, равным «it» (итальянский)

: последний ребенок p: последний ребенок Выбирает каждый элемент

, который является последним дочерним элементом своего родителя

: последняя машина p: последний тип Выбирает каждый элемент

, который является последним элементом

его родительского

: ссылка а: ссылка Выбирает все непосещенные ссылки
: нет ( селектор ): нет (p) Выбирает каждый элемент, не являющийся элементом

: nth-ребенок ( n ) p: nth-ребенок (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родительского

: nth-последний-ребенок ( n ) p: nth-last-child (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента

: nth-last-of-type ( n ) p: nth-last-of-type (2) Выбирает каждый элемент

, который является вторым элементом

своего родительского элемента, считая от последнего дочернего элемента

: nth-of-type ( n ) p: nth-of-type (2) Выбирает каждый элемент

, который является вторым элементом

его родительского

: только тип p: одинарный Выбирает каждый элемент

, который является единственным элементом

его родительского

: только ребенок p: только ребенок Выбирает каждый элемент

, который является единственным дочерним элементом своего родительского

: опционально вход: опционально Выбирает элементы ввода без атрибута «обязательный»
: вне допустимого диапазона вход: вне диапазона Выбирает элементы ввода со значением вне указанного диапазона
:: заполнитель input :: заполнитель Выбирает элементы ввода с указанным атрибутом «заполнитель».
: только для чтения вход: только для чтения Выбирает элементы ввода с указанным атрибутом «только для чтения».
: чтение-запись вход: чтение-запись Выбирает элементы ввода с НЕ указанным атрибутом «только для чтения».
: требуется ввод: требуется Выбирает элементы ввода с указанным атрибутом «required»
: корень: корень Выбирает корневой элемент документа
:: выбор :: выбор Выбирает часть элемента, выбранную пользователем
: цель # новости: target Выбирает текущий активный элемент #news (щелкнул URL-адрес, содержащий это имя привязки)
: действует ввод: действителен Выбирает все элементы ввода с допустимым значением
: посетил a: посетил Выбирает все посещенные ссылки

.

: селектор nth-child () | Документация jQuery API

Описание: Выбирает все элементы, являющиеся n-м потомком своего родителя.

Поскольку реализация селекторов : nth- в jQuery строго получена из спецификации CSS, значение n является «индексированным 1», что означает, что подсчет начинается с 1. методов jQuery, таких как .first () или .eq () jQuery следует подсчету «0-indexed» в JavaScript. Для одного

    , содержащего два

  • , $ ("li: nth-child (1)") выбирает первые
  • , а $ ("li").eq (1) выбирает второй.

    Псевдокласс : nth-child (n) легко спутать с вызовом .eq (n) , даже несмотря на то, что они могут привести к кардинально разным совпадающим элементам. С : nth-child (n) подсчитываются все дочерние элементы, независимо от того, что они собой представляют, и указанный элемент выбирается, только если он соответствует селектору, прикрепленному к псевдоклассу. При вызове .eq (n) учитывается только селектор, прикрепленный к псевдоклассу, не ограничиваясь дочерними элементами любого другого элемента, и выбирается (n + 1) -й (n начинается с 0).

    Дальнейшее обсуждение этого необычного использования можно найти в спецификации W3C CSS.

    Примеры:

    Найдите второй li в каждой совпавшей ul и запишите его.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

     
       nth-child demo

    .

    No related posts.

Share :

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

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