Css дочерние селекторы: Селектор дочерних элементов

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

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

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>

<html>

<body>

<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>

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

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

На рис. 11.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <DIV> выступает параграф <P>. Вместе с тем тег <STRONG> не является дочерним для тега <DIV>, поскольку он расположен в контейнере <P>.

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

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

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

Замечание

Дочерние селекторы не поддерживаются браузером Internet Explorer.

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

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

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<title>Дочерние селекторы</title>

DIV I { /* Контекстный селектор */

color: green; /* Зеленый цвет текста */

}

DIV > 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 dolore magna aliguam

erat volutpat. </p>

</div>

<div>

<p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing

elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam

erat volutpat.</p>

</div>

</body>

</html>

В данном примере курсивный текст будет отображаться зеленым цветом из-за того, что дочерний селектор указан некорректно. В стиле прописано изменить цвет текста на красный у содержимого тега <I>, но только в том случае, если он непосредственно находится внутри <DIV>. А в нашем случае тег <I> располагается внутри <P>, поэтому стиль применяться не будет. Зато будет действовать контекстный селектор, который и задает зеленый цвет.

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

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

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

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

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<title>Дочерние селекторы</title>

UL#menu > LI {

list-style: none; /* Убираем маркеры списка */

width: 120px; /* Ширина элемента в пикселах */

background: #ddd; /* Цвет фона */

color: maroon; /* Цвет текста */

padding: 5px; /* Поля вокруг текста */

font-family: Arial, sans-serif; /* Рубленый шрифт */

font-size: 90%; /* Размер шрифта */

font-weight: bold; /* Жирное начертание */

float: left; /* Располагаем элементы по горизонтали */

}

LI > UL {

list-style: none; /* Убираем маркеры списка */

padding: 0px; /* Убираем отступы вокруг элементов списка */

padding-top: 5px; /* Добавляем отступ сверху */

}

LI > A {

display: block; /* Ссылки отображаются в виде блока */

font-weight: normal; /* Нормальное начертание текста */

font-size: 90%; /* Размер шрифта */

background: #fff; /* Цвет фона */

border: 1px solid #666; /* Параметры рамки */

padding: 5px; /* Поля вокруг текста */

}

</style>

</head>

<body>

<li>Редактор</li>

<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=»emphasis.html»>Приятное</a></li>

</ul>

</li>

<li>Размер

<ul>

<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>

CSS дочерние селекторы / использование вашего потомка

С самого начала css серьезно интересовался выявлением ближайших детей. Благодаря комбинации комбинаторов (+ и ~) и псевдо-селекторов (: first-child и: last-child) стало возможным нацеливать конкретные элементы просто на основе структуры dom. Теперь css3 предоставляет нам целый ряд новых опций, но остается вопрос, хватит ли их, несмотря на их относительную сложность.

Прежде всего, эта статья не о стилях элементов, основанных исключительно на их положении в дом. Некоторое время назад был небольшой ажиотаж, подталкивающий к меньшему количеству классов и более прямому нацеливанию через css. Я всегда видел в этом прямую атаку на гибкость и здравый смысл CSS, хотя я ценю чистую настройку HTML так же, как и следующий фронтендер. Новые псевдоселекторы css3 дают вам больше свободы для расширения этой концепции, но я не буду рассказывать вам, как это сделать.

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

расстояние фиксации

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

1/ ul {padding:1em;}  
2/ ul li {float:left; margin:0em 1em 1em 0em;}  
3/ ul li:nth-child(3n) {margin-right:0;}  
4/ ul li:nth-last-child(-n+3) {margin-bottom:0;}

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

С помощью третьего оператора CSS мы можем нацелить каждый третий элемент списка. ‘N’ принимает увеличивающиеся целочисленные значения и сопоставляет его с элементами в dom. Четвертое утверждение CSS делает то же самое для трех последних пунктов списка. Синтаксис немного менее прозрачен, но все равно работает.

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

добавление углов

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

1/ ul li:first-child {border-top-left-radius:10px;}  
2/ ul li:last-child {border-bottom-right-radius:10px;}  
3/ ul li:nth-child(3) {border-top-right-radius:10px;}  
4/ ul li:nth-last-child(3) {border-bottom-left-radius:10px;}

Достаточно просто, хотя и немного жестко и долго. И, конечно же, для того, чтобы он работал в Safari, Chrome и Firefox, вам нужно добавить много дерьма от поставщиков браузеров.

Проверьте первый пример на тестовой странице, чтобы увидеть, как он работает .

что не нравится

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

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

Еще одним требованием к нашему решению является то, что элементы в пределах размера сетки относятся к их родителям. Если элементы списка имеют фиксированную ширину в пределах em-макета, увеличение страницы снова нарушит нашу CSS.

разумное решение

Есть еще одно решение, но оно работает только теоретически (и каким-то образом испорченным способом Webkit). Вместо того, чтобы устанавливать закругленные углы на элементах списка, мы могли бы поместить их на обертку вокруг него. Таким образом, мы будем уверены, что они попадут в четыре угла нашей сетки.

1/ ul {overflow:hidden; border-radius:10px; }  
2/ ul li {float:left;}  
3/ ul li:nth-child(3n) {margin-right:0;}  
4/ ul li:nth-last-child(-n+3) {margin-bottom:0;}

К сожалению, вспоминая мою предыдущую статью о проблеме с закругленными углами , нет способа предотвратить визуальное оформление элементов списка от перетекания по закругленным углам, определенным для элемента ul. Только в Webkit, используя ужасно неправильно используемое свойство overflow: hidden, вы можете исправить это поведение.

Поэтому, хотя в теории это решение является более надежным и гибким, оно просто не работает так, как должно. Когда мы все еще верили, что css3 исправит все наши проблемы …

Посмотрите второй пример на тестовой странице, чтобы увидеть, как он работает (в Safari / Chrome) .

заключение

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

CSS: первый дочерний селектор

❮ Предыдущий Справочник по селекторам CSS Далее ❯

Пример

Выберите и стилизуйте каждый элемент

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

p:first-child {
фоновый цвет: желтый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

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

Версия:	CSS2

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

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:первый ребенок	4,0	7,0	3,0	3.1	9,6

Синтаксис CSS

:first-child {
объявления css ;
} Демонстрация

Другие примеры

Пример

Выберите и стилизуйте каждый элемент каждого элемента

, где элемент

первый потомок своего родителя:

p:first-child i {
фон: желтый;
}

Попробуйте сами »

Пример

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

в списках:
li:первый ребенок {
фон: желтый;
}
Попробуйте сами »
Пример
Выберите и настройте первый дочерний элемент каждого элемента
:
ul > :first-child {
фон: желтый;
}
Попробуйте сами »
Связанные страницы
Учебник CSS: Псевдоклассы CSS
❮ Предыдущая Справочник по селекторам CSS Следующий ❯

ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Справочник по функциям CSS
❮ Предыдущий Далее ❯
Функции CSS используются в качестве значений для различных свойств CSS.
Функция Описание
атрибут() Возвращает значение атрибута выбранного элемента
расчет() Позволяет выполнять вычисления для определения значений свойств CSS
конический градиент() Создает конический градиент
счетчик() Возвращает текущее значение именованного счетчика
кубический-безье() Определяет кубическую кривую Безье
hsl() Определяет цвета с помощью модели Hue-Saturation-Lightness (HSL)
хсла() Определяет цвета с помощью модели Hue-Saturation-Lightness-Alpha (HSLA)
линейный градиент() Создает линейный градиент
макс() Использует наибольшее значение из списка значений, разделенных запятыми, в качестве стоимость свойства
мин() Использует наименьшее значение из списка значений, разделенных запятыми, в качестве стоимость свойства
радиальный градиент() Создает радиальный градиент
повторяющийся конический градиент() Повторяет конический градиент
повторяющийся линейный градиент() Повторяет линейный градиент
повторяющийся радиальный градиент() Повторяет радиальный градиент
RGB() Определяет цвета с использованием красно-зелено-синей модели (RGB)
rgba() Определяет цвета с помощью красно-зелено-сине-альфа-модели (RGBA)
переменная() Вставляет значение пользовательского свойства
❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
90016 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top6s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Штирлиц — Сеть печатных салонов в Перми

Css дочерние селекторы: Селектор дочерних элементов — CSS

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

CSS дочерние селекторы / использование вашего потомка

расстояние фиксации

добавление углов

что не нравится

разумное решение

заключение

CSS: первый дочерний селектор

Пример

Определение и использование

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

Синтаксис CSS

Другие примеры

Пример

Пример

Пример

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Основные примеры

Справочник по функциям CSS

ВЫБОР ЦВЕТА

Лучшие учебники

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