Соседние селекторы | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.08.0+1.0+3.5+1.0+1.0+1.0+1.0+

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

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

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

<p>Lorem ipsum <b>dolor</b> sit amet. </p>

Тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

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

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Соседние селекторы</title>
  <style>
   b + i {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.
 
 ="значение"]
  • [атрибут|="значение"]
  • [атрибут~="значение"]
  • Вложенные селекторы
  • Дочерние селекторы
  • Идентификаторы
  • Классы
    •  
    Статьи по теме
    Рецепты CSS
    Соседние (смежные) и родственные селекторы CSS — учебник CSS
    В прошлых подглавах мы изучали родственные отношения между тегами HTML-документа, в том числе рассматривали селекторы дочерних элементов. Теперь пришло время познакомиться с селекторами родственных элементов и селекторами соседних элементов.
    Соседние селекторы
     
    С помощью соседних селекторов (также их называют смежными) выбираются элементы веб-страницы, у которых есть общий родитель и они находятся рядом друг с другом. Стиль применяется к последнему указанному в селекторе элементу.
    Пример: допустим, вам необходимо, чтобы каждый абзац <p>, который идет первым после заголовка <h2>, имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:
     
    
h2+p {
font-style: italic;
}

    Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN {} (стиль применяется к selectorN).
    Примеры написания:
    
/* Отступ от абзаца до картинки 30px */
p+img {
padding-top: 30px;
}

/* Зеленый цвет для абзаца, который следует после h4 в связке с h3 */
h3+h4+p {
color: green;
}

     
    Родственные селекторы
    Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда ~.
    Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев 
     
    <p>, которые идут после заголовка <h2>. Код CSS будет выглядеть так:
    
h2 ~ p {
  font-style: italic;
}

    …и немного HTML для примера:
    
<div>
<p>Текст</p>
<h2>Заголовок 1</h2>
<p>Текст</p>
<p>Текст</p>
<h3>Заголовок 2</h3>
<p>Текст</p>
 </div>

<div>
<p>Текст</p>
 </div>

     
    Взгляните на HTML-код: стиль применится ко всем тегам <p>, которые следуют после тега <h2> и находятся до закрывающего тега родителя <div>. В нашем варианте насчитывается 3 элемента <p>, к которым применится стиль. Обратите внимание, что тег <h3> этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу <p>, который находится над <h2>, а также к тегу <p>, имеющему другого родителя <div>.
     
    Выводы
    Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
    С помощью родственных селекторов можно применять стиль ко всем элементам выбранного типа в случае, когда они следуют сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
    Перейдя к следующей подглаве, вы познакомитесь с селекторами атрибутов.
     Комбинаторы CSS 
     ❮ Предыдущий
Далее ❯
     Комбинаторы CSS 
     Комбинатор — это то, что объясняет взаимосвязь между селекторами.
     Селектор CSS может содержать более одного простого селектора. Между простым
селекторы, мы можем включить комбинатор.
     В CSS есть четыре разных комбинатора:
    •  селектор потомков (пробел)
    •  дочерний селектор (>)
    •  селектор соседнего брата и сестры (+)
    •  общий родственный селектор (~)
     Селектор потомков 
     Селектор потомков соответствует всем элементам, которые являются потомками указанного
элемент.
     
     В следующем примере выбираются все элементы
     внутри элементов
    : 
     Пример 
     div p { 
       background-color: yellow; 
     }
     Попробуйте сами »
     Селектор дочерних элементов (>) 
     Селектор дочерних элементов выбирает все элементы, которые являются дочерними элементами
указанный элемент.
     В следующем примере выбираются все элементы
    ,
дети
     element:
     Пример 
     div > p { 
       цвет фона: желтый; 
     }
     Попробуйте сами »
     Селектор соседнего родственного элемента (+) 
     Селектор соседнего родственного элемента используется для выбора элемента, который непосредственно
после другого определенного элемента.
     Родственные элементы должны иметь один и тот же родительский элемент, а «смежный» означает
"сразу после".
     В следующем примере выбирается первый элемент
    , расположенный сразу после элементов
     
    :
     Пример 
     div + p { 
       background-color: yellow; 
     }
     Попробуйте сами »
     Общий селектор родственных элементов (~) 
     Общий селектор родственных элементов выбирает все элементы, которые являются следующими одноуровневыми элементами указанного элемента.
     В следующем примере выбираются все элементы
    , которые являются следующими одноуровневыми элементами
    : 
     Пример 
     div ~ p { 
       background-color: yellow; 
     }
     Попробуйте сами »
     Проверьте себя с помощью упражнений 
     Упражнение: 
     Измените цвет всех элементов
    , являющихся потомками элементов
    , на «красный».
    <стиль>
 {
  красный цвет;
}

<тело>
<дел>
  
    Это абзац.
    
  
    Это абзац.
    

    

    Это абзац.
    

    Это абзац.

    Начать упражнение

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

    Селектор Пример Пример описания
    элемент элемент раздел стр Выбирает все элементы

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

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

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

    элемент+элемент дел + р Выбирает первый элемент

    , расположенный сразу после элементов

    элемент1~элемент2 р ~ ул Выбирает каждый элемент
      , которому предшествует элемент

    ❮ Предыдущий Следующий ❯


    ВЫБОР ЦВЕТА

    Лучшие учебники
    Учебник по HTML
    Учебник по CSS
    Учебник по JavaScript
    Учебник How To
    Учебник по SQL
    Учебник по Python
    Учебник по W3.
    CSS
    Учебник по Bootstrap
    Учебник по PHP
    Учебник по Java
    Учебник по C++
    Учебник по jQuery 9005 Tops

    3 900 Справочник по HTML
    Справочник по CSS
    Справочник по JavaScript
    Справочник по SQL
    Справочник по Python
    Справочник по W3.CSS
    Справочник по Bootstrap
    Справочник по PHP
    Цвета HTML
    Справочник по Java
    Справочник по Angular
    Справочник по jQuery

    Основные примеры
    Примеры HTML
    Примеры CSS
    Примеры JavaScript
    Примеры How To Примеры
    Примеры SQL
    Примеры Python
    Примеры W3.CSS
    Примеры Bootstrap
    Примеры PHP
    Примеры Java
    Примеры XML
    Примеры jQuery
    | О

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

    Copyright 1999-2023 Refsnes Data. Все права защищены.

    W3Schools использует W3.CSS.

    Селектор смежных братьев и сестер

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

    Как было показано в предыдущих статьях этой серии, в CSS появилось несколько новых интересных селекторов. Между универсальным селектором и дочерним селектором можно создать селекторы, которые были бы практически невозможны при использовании традиционных селекторов в стиле CSS1.

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

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

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

     h2 + P {верхнее поле: 0;}

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

    Давайте рассмотрим это подробнее. Некоторое время изучите представление в виде дерева на рис. 1.


    Рис. 1. Поиск соседних одноуровневых элементов с помощью дерева документов.

    Одним из примеров смежных элементов одного уровня являются элементы EM и STRONG в абзаце. На самом деле единственное место на рисунке 1, где элементы не имеют смежных братьев и сестер, это место, где у них вообще нет братьев и сестер, например, элемент A ; а в неупорядоченном списке с тремя ЛИ детей. Там первый и третий элементы ЛИ не являются соседними. Первый и второй являются смежными, так же как второй и третий, но первый и третий разделены вторым и, следовательно, не являются смежными.

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

     EM + STRONG {цвет: зеленый;}

    Вернувшись к рисунку 1, мы видим, что элемент STRONG , являющийся частью абзаца, будет зеленым, а элемент STRONG , являющийся частью LI , — нет. Обратите внимание, что это верно, несмотря на то, что внутри абзаца может быть текст, который находится между EM и STRONG элементы. Например:

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

    Текст между элементами не влияет на работу селектора. Это справедливо даже для элементов блочного уровня. Рассмотрим:

    <дел>
 
    Привет, элемент h4
     
Вот некоторый текст, который является частью DIV,
и не содержится в его дочернем элементе.

    Это короткий абзац

    Мы можем сделать абзац серым, используя следующее правило:

     h4 + P {цвет: серый;}

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

    Объединение с другими селекторами

    любой абзац, который следует за h4 , где бы в документе это ни происходило. Если мы хотим выбрать только те абзацы, которые следуют за заголовками уровня h4, содержащимися в разделе ( DIV ), то мы должны написать:

     DIV h4 + P {color: grey;}

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

     DIV > h4 + P {цвет: серый;}

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

     DIV > h4 + * {цвет: серый;}

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

     TABLE + DIV.aside * {color: grey;}
TABLE + DIV.aside A: ссылка {color: #444; украшение текста: подчеркивание;}

    Если вы все еще немного не уверены в том, как это работает, попробуйте взять свой собственный документ средней сложности и попытаться создать селекторы, которые будут точно обращаться к заданному элементу, используя все различные селекторы CSS2, которые мы здесь использовали. Небольшая практика поможет освоиться с этими селекторами. (Сведения о том, какие браузеры помогут вам в этом, см. в разделе «Поддержка браузеров» в конце статьи.)

    Интересное применение

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

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

     h2 + P {начертание: курсив; размер шрифта: 150%;}

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

     h2.title + P {font-style: italic; размер шрифта: 150%;}

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

     LI + LI {цвет: серый; размер шрифта: 90%;}

    Первый LI в списке не будет выбран, потому что он не следует непосредственно за элементом LI, но все остальные выбирают.

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

     h2, h3, h4 {margin-bottom: 0.125em;}
h2 + *, h3 + *, h4 + * {верхнее поле: 0,125em;}

    Та-да! Обычный размер поля между заголовками и всем, что за ними следует, сведен до одной восьмой em. Вы, конечно, можете варьировать эту сумму по своему усмотрению. Это может быть адаптировано любым количеством способов: вы можете приблизить списки к абзацам, используя P + UL , увеличить разделение между таблицами, которые непосредственно следуют друг за другом, и многими другими вещами.

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

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

    No related posts.