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

Leave a Comment / Css / By /

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

CSS селекторы

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

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

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


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

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

Селектор
Chrome
Firefox
Opera
Safari
IExplorer
Edge
element > elementДаДаДаДа7.012.0

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. — it-black.ru Перейти к содержимому
Соседние селекторы

Соседними называются элементы web-страницы, когда они следуют непосредственно друг за другом в коде документа. Синтаксис:


P + H { Описание правил стиля }

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами

P и H. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу H, но только в том случае, если он является соседним для элемента P и следует сразу после него. Рассмотрим пример:


<html>
 <head>
  <meta charset="utf-8">
 <title>Соседние селекторы</title>
  <style>
   b + i {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Стиль при такой <b>записи</b> применяется к <i>элементу</i> H</p>
   <p>Но только в том случае, если он <i>является</i> соседним для элемента P и следует сразу после него.</p>
 </body>
</html>
Родственные селекторы

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

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


<html>
 <head>
  <meta charset="utf-8">
 <title>Родственные селекторы</title>
<style>
h2 ~ p {
  font-style: italic; /* Наклонный шрифт для всех абзацев */
}
</style>
 </head>
 <body>
<div>
<p>Текст</p>
<h2>Заголовок 1</h2>
<p>Текст</p>
<p>Текст</p>
<h3>Заголовок 2</h3>
<p>Текст</p>
 </div>
<div>
<p>Текст</p>
 </div>
 </body>
</html>

В данном примере стиль применится ко всем тегам <p>, которые следуют после тега <h2> и находятся до закрывающего тега родителя <div>.

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

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


P > H { Описание правил стиля }

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


<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; } не сработает — наклонный текст второго абзаца не будет отображён синим цветом.

Facebook

Twitter

  • No Comments

Группа в VK

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Облако меток

Похожие статьи

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

CSS-фреймворки

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

Instagram Vk Youtube Telegram Odnoklassniki

Полезно знать

Рубрики

Авторы

Селекторы потомков и потомков в CSS

Улучшить статью

Сохранить статью

  • Уровень сложности: Базовый
  • Последнее обновление: 10 июн, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

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

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

    Синтаксис:  

     элемент > элемент {
    // Свойство CSS
}

    Пример: Соответствует всем элементам

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

    .

    html

    < html >

         < head >

            

    < title >

                 CSS child Selector

             title >

             < style >

                 div > p {

                     цвет:белый;

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

                     padding:2px;

                 }

             style >

         head >

          

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

             < Div >

    < H3 Стиль = "Цвет: зеленый;">

    CSS Child Selector 9003

    CSSS 9003

    CSSS.

    < P >

    Портал компьютерных наук для геков.

                 p >

             div >

              

             < p >Geeks Classes is a quick курс по

             вопросов по алгоритмам.0042 < P > Этот пункт не будет стиль. >

    Вывод:

       

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

    Синтаксис:  

     элемент элемент {
    // Свойство CSS
}

    Пример: Выбирает все элементы

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

    .

    html

    < html >

     

    < head >

         < title >

             CSS Descendant Selector

         title >

          

         < style >

             div h3 {

                 размер шрифта: 26 пикселей;

             }

    Стиль >

    HEAD >

    <

    <

    9003

    <

    9003

    <

    9003

    <

    9003

    .      < div >

             < h3 style = "color green; >

                 GeeksForGeeks

             h3 >

              

             < div >

                 < h3 >GeeksForGeeks h3 >

             дел.0043 div >

          

         < p >

             GeeksforGeeks in green color is

             example of child Selector

             < br >другие GeekforGeeks пример

             потомка Selector

         p >

    body >

     

    html >                   

    Output:

     


    Статьи по теме

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

    Веб-обзор
    июнь 2000 г.

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

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

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

     body > p {цвет: зеленый;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     div ol > li em {color: Purple;}

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

     <тело>
 <ол>
  
  • Текст em здесь не фиолетовый.
    • 
 
 <дел>
  <ол>
   
  • Смотрите, список:
    <ул>
     
  • Подчеркнутый здесь текст выделен фиолетовым цветом.
    •

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

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

     body > ol > li {цвет: серебристый;} 
     
 <ол>
  
  • Текст здесь серебристого цвета. 
    • 
 
 <дел>
  <ул>
   
  • Смотрите, список (кстати, этот текст не серебряный):
    <ол>
     
  • Текст здесь не серебристый.
    •

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

    Universal Children

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

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

     body > * {начертание шрифта: полужирный;}

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

     body > * > * {шрифт: полужирный;}

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

     body > * > h2 {font- стиль: курсив;}

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

     div > h2 > * *

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

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

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