Css предыдущий элемент: html — Как выбрать предыдущий элемент (CSS) – Как в CSS выбрать предыдущий элемент? — Хабр Q&A

Leave a Comment / Css / By /

Селектор обобщенных родственных элементов / Habr

В последующих нескольких абзацах я хочу подробнее рассмотреть селектор обобщенных родственных элементов (или ~) и область его возможного применения.
На написание данной статьи меня натолкнула малая распространённость информации о нём.
Что это такое?

Основная задача селектора обобщённых родственных элементов — выбор элемента (-ов), идущего после заданного элемента, и имеющего с ним общего родителя.
Обозначается всё это вот так:
A~B {style}, где A и B — строковые значения, определяющие селектор. style — применяемые свойства.
Пример
HTML:
<article>
    <h2>Заголовок</h2>
    <h3>Подзаголовок 1</h3>
    <p>Это абзац с текстом</p>
    <h3>Подзаголовок 2</h3>
    <span>Это текст, обрамлённый в span</span>
 </article>​

CSS:

h2~h3 {
    color:red;  
}​

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

Демо.

Если же элемент будет стоять выше исходного, то он не будет выбран.

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

Пример

HTML:

<article>
    <h2>Заголовок</h2>
    <h3>Подзаголовок 1</h3>
    <p>Это абзац с текстом</p>
    <h3>Подзаголовок 2</h3>
    <p>Это второй абзац с текстом
      <span>Это текст, обрамлённый в span, который находится внутри абзаца</span>
    </p>
</article>​

CSS:

h2~span {
    color:red;  
}​

Демо.

В результате ничего не выделится красным, т.к. родитель элемента span — p, а элемента h2 — article.
Для того чтобы span стал красным, необходимо либо вынести его из абзаца на один уровень с h2, либо сделать так:

CSS:

h2~p span {
    color:red;  
}​

Демо.

Использование вместе с :hover

На мой взгляд, всю свою полезность селектор “A~B” проявляет в связке с событиями элементов, такими как :hover, :focus и др.
Если раньше можно было менять стиль элемента только при наведении указателя мыши на него самого, то использование селектора обобщенных родственных элементов позволяет поменять стиль элемента, отличного от того, на котором произошло событие.

Символически (в случае с :hover) это выглядит так:
A:hover ~ B{style}, где A — элемент, на который наведён указатель мыши, а на B распространяются новые стилевые правила.

Пример

HTML:

<body>
  <span>Наведи указатель на эту надпись и блоки станут зёлёными</span>
  <div>Блок №1</div>
  <div>Блок №2</div>
</body>​

CSS:

 
div{
 width:100px;
 height:50px;
 margin:5px;
 background:gray;   
}
​span:hover~div{
 background:green;
}​

Демо.

В результате, блоки станут зелёного цвета, при наведении на надпись.

Теперь пойдём дальше и присвоим элементам разные классы.
Пример

HTML:

<body>
  <span>Покрасить Блок №2 в зелёный цвет</span>
    <br/>
  <span>Покрасить Блок №1 в синий цвет</span>
  <div>Блок №1</div>
  <div>Блок №2</div>
</body>​

CSS:
span{
cursor:pointer;
}

div{
 width:100px;
 height:50px;
 margin:5px;
 background:gray;   
}

.span1:hover~.block2{
 background:green;   
}

.span2:hover~.block1{
 background:blue;   
}
​

Демо.

Можно применять вот так:
HTML:

<body>
  <span>Покрасить Блок в красный цвет</span>
    <br/>
  <span>Покрасить Блок в синий цвет</span>
     <br/>
  <span>Покрасить Блок в зелёный цвет</span>
    
  <div>Блок</div>
</body>​

 
CSS:
span{
cursor:pointer;
}

div{
 width:100px;
 height:50px;
 margin:5px;
 background:gray;   
}

.spanRed:hover~.block{
 background:red;   
}
.spanBlue:hover~.block{
 background:blue;   
}
.spanGreen:hover~.block{
 background:green;   
}

Демо
Анимируем

Очень интересного эффекта можно достичь в совокупности с новыми возможностями CSS3. Например, в примере ниже используется свойство transition.

Пример

HTML:

<body>
  <span>Вправо</span>
    
  <span>Влево</span>
     
  <span>Вверх</span>
    
  <span>Вниз</span>
     <br/>
    
  <div>Блок</div>
</body>​

CSS:
span{
position:absolute;
display:block;
width:100px;
height:50px;
margin:10px;
background:silver;
cursor:pointer;
}
.left{
    top:12%;
}
.right{
    top:12%;
    left:40%;
}
.top{
    left:20%;
}
.down{
     top:25%;
    left:20%;
}
.block{
 position:absolute;
 top:50%;
 right:50%;
 width:100px;
 height:50px;
 margin:5px;
 background:gray;
 -webkit-transition:all 2s ease;
 -o-transition:all 2s ease;    
 -moz-transition:all 2s ease;   
}
.right:hover~.block{
 right:10%;   
}
.left:hover~.block{
 right:90%;   
}
.top:hover~.block{
 top:10%;   
}
.down:hover~.block{
 top:90%;   
}

Демо

Как видите, у селектора обобщенных родственных элементов есть достаточное количество интересных способов применения. В последнее время CSS продвинулся далеко и позволяет реализовать то, что раньше возможно было только с использованием JavaScript.
Но всё-таки, на мой взгляд, если провести аналогии, CSS — это механическая составляющая (если угодно — “железо”) которая не предназначена для построения логики. JavaScript, например, может выступать в роли “программного обеспечения”.
Итак, в этой статье я попытался раскрыть тему селектора обобщенных родственных элементов. Получилось или нет, судить вам.

Ну и на последок (наведите на солнышко)

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

CSS селекторы

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

Использование селектора следующих элементов (элемент 1 ~ элемент 2) позволяет выбрать все элементы 2, которые следуют сразу же за элементом 1 (смежные элементы), а также все элементы 2, которые находятся на одном уровне вложенности (сестринские элементы, или другое название — соседние).

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

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

CSS синтаксис:

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

Версия CSS

CSS3

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

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


Выбор смежных и сестринских элементов в документе.

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

Для того, чтобы нам выбрать все элементы <p>, которые следуют сразу за <h3> и элементы <p>), которые являются сестринскими по отношению к друг другу, нам необходимо создать следующий селектор:

h3~p {
блок объявлений;
}

Кроме того, нам необходимо по особенному стилизовать все элементы, которые являются сестринскими для элемента <div> (элементы <h3> и <p>). Для этого нам необходимо использовать селектор следующих элементов с универсальным селектором:

div~* {
блок объявлений;
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор смежных элементов</title>
<style>

 h3~p { /* выбираем все элементы <p> смежные и сестринские для <h3> */
background-color: lightblue; /* задаём цвет заднего фона */
color: red; /* задаём цвет текста */
}
div~* { /* выбираем все сестринские элементы <div> */
font-style: italic; /* устанавливаем курсивное начертание шрифта */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
}
</style>
</head>
	<body>
		<div>
			<h3>Заголовок внутри div</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
		</div>
		<h3>Заголовок внутри body</h3>
		<p>Абзац один</p>
	</body>
</html>

В этом примере с использованием селектора следующих элементов мы стилизовали первые абзацы, которые следуют сразу после заголовков второго уровня (смежные элементы) и все сестринские абзацы. Кроме того, по особенному стилизовали все элементы, которые являются сестринскими для элемента <div>.

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

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

Что изменит цвет внутреннего элемента предыдущего div при наведении текущего div [duplicate]

Вы хотите, чтобы элемент A загорелся, когда элемент B зависает.

… и voilà! Предыдущий родитель (или, по крайней мере, имитируемый) родился [или g28] 

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}
<ul>
    <li>B</li>
    <li>A</li>
</ul>

5.4. Порядок отображения: свойство order

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

Свойство order управляет порядком, в котором элементы гибкости появляются в контейнере flex, назначая их порядковым группам. Он принимает одно значение <integer>, которое указывает, к какой порядковой группе принадлежит элемент flex.

blockquote>

Начальное значение order для всех элементов flex равно 0.

Также см. order в спецификации CSS Grid Layout spec .

Примеры «предыдущих селекторов севера», созданных с использованием свойства flex order.

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}
 
<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div>
    <div><span>1</span></div>
    <div><span>2</span></div>
    <div><span>3</span></div>
    <div><span>HOVER ME</span></div>
    <div><span>4</span></div>
</div>

<br>

<div>
    <div><span>HOVER ME</span></div>
    <div><span>HOVER ME</span></div>
    <div><span>6</span></div>
    <div><span>7</span></div>
    <div><span>8</span></div>
    <div><span>10</span></div>
    <div><span>11</span></div>
</div>

<br>

<div>
    <div><span>HOVER ME</span></div>
    <div><span>13</span></div>
    <div><span>14</span></div>
    <div><span>15</span></div>
    <div><span>16</span></div>
    <div><span>17</span></div>
    <div><span>18</span></div>
    <div><span>19</span></div>
    <div><span>20</span></div>
</div>

A Side Note & ndash; Две устаревшие убеждения о CSS

Flexbox разрушает давние убеждения в отношении CSS.

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

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

Как описано выше, это убеждение не совсем верно. Предыдущий сингл-селектор может быть смоделирован в CSS с использованием свойства flex order.

Миф z-index

Еще одно давнее убеждение что z-index работает только с расположенными элементами.

Фактически, самая последняя версия spec & ndash; Проект редактора W3C & ndash; все еще утверждает, что это правда:

9.9.1 Определение уровня стека: свойство z-index

z-index

  • Значение: auto | | inherit
  • Начальное: auto
  • Применяется к: позиционированным элементам
  • Inherited: no
  • Процент: N / A
  • Медиа: визуальный
  • Вычисленное значение: как указано

(выделено курсивом)

blockquote>

В действительности, однако, эта информация устарела и неточна.

Элементы, которые являются элементами гибких элементов или , могут создавать (f28) static.

4.3. Элемент Flex Item Z-Ordering

Элементы Flex представляют собой то же самое, что и встроенные блоки, за исключением того, что порядок ортогонального заказа используется вместо необработанного порядка документа и значения z-index, отличные от auto создать контекст стекирования, даже если position — static.

5.4. Z-axis Ordering: свойство z-index

Порядок рисования элементов сетки точно такой же, как и встроенные блоки, за исключением того, что порядок ортогонального заказа используется вместо необработанного порядка документа и z-index, отличные от auto, создают контекст стекирования, даже если position — static.

blockquote>

Ниже приведена демонстрация работы z-index над непозиционированными элементами гибкости: https://jsfiddle.net/m0wddwxs/

Комбинатор элемент+элемент | CSS селектор

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

Описание

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

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

Рассмотрим, как это работает на небольшом примере:

 div + p { color: blue; }

Таким образом мы указали, что стиль будет применён ко всем элементам <p>, которые расположены в коде непосредственно после элементов <div>.

Между комбинатором соседних сестринских элементов и селекторами допускается ставить пробел, он никак не повлияет на работу комбинатора:

  • div+p
  • div+ p
  • div +p
  • div + p
Пример:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      div + p { background-color: yellow; }
    </style>
  </head>

  <body>

    <div>
      <p>Этот абзац расположен внутри элемента &lt;div&gt;.</p>
    </div>
	
    <p>Этот абзац является соседним сестринским элементом по отношению
	к элементу &lt;div&gt;.</p>
	
	<p>Ещё один абзац, однако он не является соседним по отношению к
	элементу &lt;div&gt;.</p>

  </body>
</html>
Результат данного примера:

Этот абзац расположен внутри элемента <div>.

Этот абзац является соседним сестринским элементом по отношению к элементу <div>.

Ещё один абзац, однако он не является соседним по отношению к элементу <div>.

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

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