Selector css plus: Смежные селекторы — CSS | MDN

Leave a Comment / Css / By /

Соседние селекторы | 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 - Разница между селекторами div+p (плюс) и div~p (тильда) 
      
    
                        спросил
                          
     
    
                        Изменено
                        3 месяца назад
 
     
    
                        Просмотрено
                        54к раз
 
     
     То, как это формулирует w3schools, звучит одинаково. 
     
    
   
      Справочник W3Schools по CSS  
    
  
   
      div + p  
     Выбирает все  
      элементов, которые размещены сразу после  
      элементов 
    
  
   
      div ~ p  
     Выбирает каждый элемент  
     , которому предшествует элемент  
      
    
 
     
     Если элемент  
      находится сразу после элемента  
     , не означает ли это, что элементу  
      предшествует  
      элемент? 
     
     
     Во всяком случае, я ищу селектор, в котором я могу выбрать элемент, который находится непосредственно на  месте перед  данным элементом.  
     
       
    •  css 
      •  
    •  css-селекторы 
      •  
     
    




            2
     
     
      Селекторы соседних элементов X + Y  
     
    
   
     Смежные одноуровневые селекторы имеют следующий синтаксис: E1 + E2, где
  E2 является предметом селектора. Селектор совпадает, если E1 и E2
  имеют один и тот же родитель в дереве документов, и E1 непосредственно предшествует
  E2, игнорируя неэлементные узлы (например, текстовые узлы и комментарии). 
    
 
     
     ул + р {
   красный цвет;
}
 
     В этом примере будут выбраны только
 элемент, которому непосредственно предшествует предыдущий элемент. В этом
 случае только первый абзац после каждого ul будет иметь красный текст.
      
     ул + р {
    красный цвет;
} 
     <дел>
    <ул>
        
  • Элемент списка
    • 
        
  • Элемент списка
    • 
        
  • Элемент списка
    • 
        
  • Элемент списка
    • 
    
    
    Это будет красным
    
    
    Это будет черное
    
    
    Это будет черное
    
 
      Общие одноуровневые селекторы X ~ Y 
     Комбинатор ~ разделяет два селектора и сопоставляет второй
 элемент только в том случае, если ему предшествует первый и оба имеют общий
 родитель.
     ул ~ р {
   красный цвет;
}
 
     Этот одноуровневый комбинатор похож на X + Y, но меньше
 строгий. В то время как соседний селектор (ul + p) выберет только первый
 элемент, которому непосредственно предшествует прежний селектор, этот
 является более обобщенным. Он выберет, ссылаясь на наш пример выше,
 любые элементы p, если они следуют за ul.
     
     ул ~ р {
  красный цвет;
} 
     <дел>
  <ул>
    
  • Элемент списка
      <ул>
        
  • Ребенок
    • 
      
    
    
  • Элемент списка
    • 
    
  • Элемент списка
    • 
    
  • Элемент списка
    • 
  
  
    Это будет красным.
    
  
    Это будет красным.
    
  
    Это будет красным.
    
  
    Это будет красным.
    
 
      Источник 
     code.tutsplus
     Общие одноуровневые селекторы MDN
     Смежные одноуровневые селекторы w3
     3
     Если элемент 
      находится сразу после элемента 
     , не означает ли это, что элементу 
      предшествует элемент 
     ?
     Это верно.
      Другими словами,  дел + p  - это  правильное подмножество  из  div ~ p  - все, что соответствует первому, соответствует , а также  соответствует последнему, по необходимости.
     Разница между  +  и  ~  заключается в том, что  ~  соответствует всем последующим родственным элементам независимо от их близости от первого элемента, если они оба имеют одного и того же родителя.
     Оба эти пункта наиболее кратко проиллюстрированы одним примером, где каждое правило применяет другое свойство. Обратите внимание, что  p , который следует сразу за  div , имеет оба правила:
     div + p {
    красный цвет;
}

дел ~ р {
    цвет фона: желтый;
} 
     <раздел>
    
    Раздел
    
    
    Абзац
    
    
    Абзац
    
    
    Абзац
    

<раздел>
    Нет раздела
    
    Абзац
     
     
    
    
    Абзац
    
    
    Абзац
    
 
     Во всяком случае, я ищу селектор, в котором я могу выбрать элемент, который находится непосредственно на  месте перед  данным элементом.
     К сожалению, пока нет.
     1
     рассмотрим этот пример:
     p + p { /* первый p сразу после предыдущего p */
   красный цвет;
}

p ~ p { /* все p после предыдущего p */
   вес шрифта: полужирный;
} 
     <дел>
   
    1
    

    разделитель
    
   
    2
     
  
    3

    1) Селекторы соседних элементов (S1 + S2)

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

     дел + р {
    красный цвет;
}

    Пример селекторов смежных элементов одного уровня

    2) Общие селекторы одного уровня (S1 ~ S2)

    Общий селектор одного уровня используется для выбора всех указанных элементов одного уровня другого указанного элемента.

     дел ~ р {
   красный цвет;
}

    Пример общих селекторов родственного элемента

    Селекторы смежного родственного элемента (S1 + S2) и общие селекторы родственного элемента (S1 ~ S2):

    Селектор смежного родственного элемента (S1 + S2) выбирает только непосредственный элемент родственного элемента, но общий родственный элемент (S1 ~ S2) selector выбирает все одноуровневые элементы другого указанного элемента. В обоих случаях оба элемента (S1 и S2) должны быть на одном уровне.

    Остальные селекторы объясняются здесь: https://www.csssolid.com/35-css-selectors-to-remember.html

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

    1. Смежный селектор родственного элемента / + — стили будут применяться только к следующему родственному элементу первого селектора.
     #as-h3+#as-p {
  красный цвет;
} 
      
    Пример соседнего брата
     

    Я соседний брат и сестра
    

    Я на расстоянии от заголовка
    1. Общий селектор одноуровневого элемента / ~ — стили будут применяться ко всем одноуровневым элементам, которые идут после первого селектора.
     .gs-h3~.gs-p {
  цвет синий;
} 
      
    Общий пример родственного элемента
     

    Я общий брат и сестра
    

    Я нахожусь на расстоянии родственного брата от заголовка 2

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Обязательно, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    html — стиль CSS для ::after с селектором plus(+)

    спросил

    Изменено 1 год, 1 месяц назад

    Просмотрено 238 раз

    Я хочу добавить стиль CSS для ::after при проверке ввода.
    Например, я хочу изменить цвет буквы «А» с красного на синего .

    Что пробовал:

     .container::after {
  содержание: «А»;
  красный цвет;
}
.container> ввод: проверено + :: после {
  цвет синий;
} 
     <метка>
  <тип ввода = "флажок" />

    И:

     .container::after {
  содержание: «А»;
  красный цвет;
}
.container> input:checked+.container::after {
  цвет синий;
} 
     <метка>
  <тип ввода = "флажок" />

    Будем признательны за любую помощь.
    Спасибо!

    Редактировать:
    Я не хочу изменять родительский стиль дочернего!
    ::after находится внутри родителя. Прямо у входа.
    Они братья и сестры.

    Вы можете установить ниже стили для контейнера, и они влияют на ::after. потому что он ВНУТРИ контейнера.

     .контейнер {
  дисплей: гибкий;
  выравнивание содержимого: по центру;
  выравнивание элементов: по центру;
}
    • html
    • css
    • css-селекторы
    • псевдоэлемент

    8

    Это невозможно в чистом CSS.

    В принятой версии этого ответа я совершенно ошибся в причине этого! Я всегда предполагал, что псевдоэлемент ::after помещался после элемента — отсюда, знаете ли, и название — но, видимо, я ошибался в этом в течение многих лет; ::before и ::after псевдоэлементы на самом деле являются первым и последним дочерним элементом основного элемента. Большое спасибо @MRNafisiA за указание на это в комментариях!

    На самом деле нет, потому что они все еще не рассматриваются как часть DOM. Родственные селекторы нельзя использовать для сопоставления с псевдоэлементами, и они не будут включены ни в какие другие селекторы, которые обычно соответствуют дочерним элементам ( first-child , last-child и т. д.).

    Так что самое близкое, что вы можете получить, вероятно, input:checked::after {} (хотя для обхода флажка с нулевой шириной необходимо немного повозиться с макетом.)

     label {display: block}
ввод :: после {
 содержание: «А»;
 красный цвет;
 поле слева: 1.

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

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