Есть ли селектор CSS" предыдущий брат"?
+
для следующего брата. Есть ли эквивалент для предыдущего брата?
14 ответов
нет, нет селектора" предыдущий брат".
на соответствующей ноте,~
для общего брата-преемника (то есть элемент приходит после этого, но не обязательно сразу после) и является селектором CSS3. +
для следующего брата и CSS2.1.
посмотреть смежный комбинатор братьев и сестер С Селекторы Уровня 3 и 5.7 смежные селекторы братьев и сестер С Каскадные Таблицы Стилей Уровень 2 Редакция 1 (CSS 2.1) спецификация.
Я нашел способ, чтобы стиль всех предыдущих братьев и сестер (напротив ~
), которые могут работать в зависимости от того, что вам нужно.
предположим, у вас есть список ссылок, и при наведении на одну из них все предыдущие должны стать красными. Вы можете сделать это так:
/* default link color is blue */
.parent a {
color: blue;
}
/* prev siblings should be red */
.parent:hover a {
color: red;
}
.parent a:hover,
.parent a:hover ~ a {
color: blue;
}
<div class="parent">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
селекторы Уровень 4 вводит :has()
(ранее предметный указатель !
), который позволит вам выбрать предыдущего брата с:
previous:has(+ next) {}
... но на момент написания статьи это некоторое расстояние за пределами кровоточащего края для поддержки браузера.
рассмотрим order
свойство компоновок flex и grid.
я сосредоточусь на flexbox в приведенных ниже примерах, но те же понятия применимы к Grid.
С помощью flexbox можно смоделировать предыдущий селектор братьев и сестер.
в частности, flex order
свойство может перемещать элементы по экрану.
вот пример:
вы хотите, чтобы элемент A стал красным, когда элемент B завис.
<ul> <li>A</li> <li>B</li> </ul>
шаги
-
сделать
ul
контейнер.ul { display: flex; }
-
изменить порядок братьев и сестер в разметке.
<ul> <li>B</li> <li>A</li> </ul>
-
используйте селектор брата для целевого элемента A (
~
или+
будет делать) .li:hover + li { background-color: red; }
-
используйте flex
order
свойство для восстановления порядка братьев и сестер на визуальном дисплее.li:last-child { order: -1; }
...и вуаля! Предыдущий селектор родного брата рождается (или, по крайней мере, моделируется).
вот полный код:
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>
из flexbox spec:
5.4. Порядок отображения:
order
свойстваэлементы Flex по умолчанию отображаются и раскладываются в том же порядке, что и в исходном документе. Этот
order
свойство может использоваться для изменения этого порядка.на
order
свойство управляет порядком отображения элементов flex в контейнере flex, назначая их порядковым группам. Это занимает один<integer>
значение, определяющее порядковую группу элемента flex принадлежать.
исходная order
значение для всех элементов flex равно 0.
см. Также order
в спецификации макета сетки CSS.
примеры "предыдущих селекторов брата", созданных с помощью 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 class="container">
<div class="box box1"><span>1</span></div>
<div class="box box2"><span>2</span></div>
<div class="box box3"><span>3</span></div>
<div class="box box5"><span>HOVER ME</span></div>
<div class="box box4"><span>4</span></div>
</div>
<br>
<div class="container">
<div class="box box9"><span>HOVER ME</span></div>
<div class="box box12"><span>HOVER ME</span></div>
<div class="box box6"><span>6</span></div>
<div class="box box7"><span>7</span></div>
<div class="box box8"><span>8</span></div>
<div class="box box10"><span>10</span></div>
<div class="box box11"><span>11</span></div>
</div>
<br>
<div class="container">
<div class="box box21"><span>HOVER ME</span></div>
<div class="box box13"><span>13</span></div>
<div class="box box14"><span>14</span></div>
<div class="box box15"><span>15</span></div>
<div class="box box16"><span>16</span></div>
<div class="box box17"><span>17</span></div>
<div class="box box18"><span>18</span></div>
<div class="box box19"><span>19</span></div>
<div class="box box20"><span>20</span></div>
</div>
jsFiddle
Примечание-два устаревших представления о CSS
Flexbox разрушает давние убеждения о CSS.
одно из таких верований заключается в том, что предыдущий селектор брата невозможен в CSS.
сказать, что эта вера широко распространена, было бы преуменьшением. Вот выборка связанных вопросов только о переполнении стека:
- выберите предыдущий брат элемента в CSS с помощью селекторов
- CSS: выберите предыдущий брат
- CSS выберите предыдущий брат
- предыдущий смежный селектор в CSS
- выберите предыдущих братьев и сестер при наведении
- селектор CSS чтобы получить предыдущий брат
- изменение цвета родственных элементов при наведении с помощью CSS
- Как выбрать предыдущего брата с помощью синтаксиса selenium css
- селектор CSS для выбора элемента, который предшествует другому элементу?
- как добавить стиль к предыдущему брату активного ввода, используя только CSS
- селектор CSS для next и предыдущие элементы
- как повлиять на другие элементы, когда div завис
на z-index
миф
другой давней Верой было то, что z-index
работает только для позиционированных элементов.
в самом деле, самая последняя версия спецификации-the Черновик редактора W3C – все еще утверждает, что это правда:
9.9.1 указание уровня стека:
z-index
собственность
z-index
- значение: auto / / inherit
- исходные: авто
- применяется к: расположенным элементам
- наследуется: нет
- Проценты: N / A
- Media: visual
- вычисляемое значение: как задано
(курсив)
на самом деле, однако, эта информация устарела и неточна.
элементов гибкий график работы пунктов или решетки предметы создать условиях укладки даже при position
is static
.
элементы Flex рисуют точно так же, как встроенные блоки, за исключением того, что заказ-измененный порядок документа используется вместо raw порядок документов и
z-index
значенияauto
создать контекст укладки, даже еслиposition
isstatic
.5.4. Z-ось заказ: с
z-index
свойствапорядок рисования элементов сетки точно такой же, как и встроенные блоки, за исключением того, что порядок измененного документа используется вместо заказа необработанного документа, и
z-index
значенияauto
создайте контекст штабелирования, даже еслиposition
isstatic
.
вот демонстрация z-index
работа на non-positioned деталях гибкого трубопровода: https://jsfiddle.net/m0wddwxs/
у меня был тот же вопрос, но потом у меня был момент "дух". Вместо того чтобы писать!--3-->
x ~ y
написать
y ~ x
очевидно, что это соответствует " x "вместо " y", но он отвечает " Есть ли совпадение?"вопрос, и простой обход DOM может привести вас к правильному элементу более эффективно, чем цикл в javascript.
Я понимаю, что исходный вопрос был вопросом CSS, поэтому этот ответ, вероятно, совершенно неуместен, но другие пользователи Javascript могут наткнуться на вопрос через поиск, как я это сделал.
два хитрости. В основном инвертирование порядка HTML ваших желаемых элементов в HTML и использование~
далее братья и сестры оператор:
float-right
+ обратный порядок элементов HTML
div{ /* Do with the parent whatever you know just to make the
inner float-right elements appear where desired */
display:inline-block;
}
span{
float:right; /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
background:red;
}
<div>
<!-- Reverse the order of inner elements -->
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>
родитель direction: rtl;
+ обратный порядок внутренних элементов
.inverse{
direction: rtl;
display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
background:gold;
}
Hover one span and see the previous elements being targeted!<br>
<div class="inverse">
<!-- Reverse the order of inner elements -->
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>
на данный момент нет официального способа сделать это, но вы можете использовать небольшой трюк для достижения этого ! Помните, что она экспериментальна и имеет некоторые ограничения ... (проверка этой ссылке если вы беспокоитесь о совместимости навигатора)
что вы можете сделать, это использовать селектор CSS3: псевдо-класс под названием nth-child()
#list>* {
display: inline-block;
padding: 20px 28px;
margin-right: 5px;
border: 1px solid #bbb;
background: #ddd;
color: #444;
margin: 0.4em 0;
}
#list :nth-child(-n+4) {
color: #600b90;
border: 1px dashed red;
background: orange;
}
<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>
<div id="list">
<span>1</span><!-- this will be selected -->
<p>2</p><!-- this will be selected -->
<p>3</p><!-- this will be selected -->
<div>4</div><!-- this will be selected -->
<div>5</div>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
ограничения
- вы не можете выбрать предыдущие элементы на основе классы следующих элементов
- это то же самое для псевдоклассов
+
для следующего брата. Есть ли эквивалент для предыдущего одноуровневый?
вы можете использовать два топор селекторы: !
и ?
здесь 2 последующие селекторы братьев и сестер в обычном CSS:
-
+
- это немедленно последующий селектор братьев -
~
- это любой последующий селектор братьев
в обычном CSS есть нет предыдущего селектора брата.
однако, в топор библиотека CSS post-processor, есть 2 предыдущие селекторы братьев и сестер:
-
?
- это немедленно предыдущий селектор братьев (напротив+
) -
!
- это любой предыдущий одноуровневый элемент селектор (напротив~
)
Пример:
в приведенном ниже примере:
-
.any-subsequent:hover ~ div
выбирает любой последующийdiv
-
.immediate-subsequent:hover + div
выбирает немедленное последующееdiv
-
.any-previous:hover ! div
выбирает -
.immediate-previous:hover ? div
выбирает непосредственно предыдущийdiv
div {
display: inline-block;
width: 60px;
height: 100px;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
text-align: center;
vertical-align: top;
cursor: pointer;
opacity: 0;
transition: opacity 0.6s ease-out;
}
code {
display: block;
margin: 4px;
font-size: 24px;
line-height: 24px;
background-color: rgba(0, 0, 0, 0.5);
}
div:nth-of-type(-n+4) {
background-color: rgb(0, 0, 255);
}
div:nth-of-type(n+3):nth-of-type(-n+6) {
opacity: 1;
}
.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
opacity: 1;
}
<h2>Hover over any of the blocks below</h2>
<div></div>
<div></div>
<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>
<div></div>
<div></div>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>
другое решение flexbox
вы можете использовать обратный порядок элементов в HTML. Тогда помимо использования order
а в Michael_B это можно использовать flex-direction: row-reverse;
или flex-direction: column-reverse;
в зависимости от вашего макета.
рабочий пример:
.flex {
display: flex;
flex-direction: row-reverse;
/* Align content at the "reversed" end i.e. beginning */
justify-content: flex-end;
}
/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
background-color: lime;
}
/* styles just for demo */
.flex-item {
background-color: orange;
color: white;
padding: 20px;
font-size: 3rem;
border-radius: 50%;
}
<div class="flex">
<div class="flex-item">5</div>
<div class="flex-item">4</div>
<div class="flex-item">3</div>
<div class="flex-item">2</div>
<div class="flex-item">1</div>
</div>
если вы знаете точное положение :nth-child()
на основе исключения всех последующих братьев и сестер будет работать.
ul li:not(:nth-child(n+3))
что бы выделить все li
S до 3-го (например, 1-го и 2-го). Но, на мой взгляд, это выглядит уродливо и имеет очень плотный usecase.
вы также можете выбрать N-й ребенок справа налево:
ul li:nth-child(-n+2)
который делает то же самое.
к сожалению, нет" предыдущего " селектора братьев, но вы можете возможно все еще получите такой же эффект, используя позиционирование (например, float right). Это зависит от того, что вы пытаетесь сделать.
в моем случае я хотел в первую очередь CSS 5-звездочную рейтинговую систему. Мне нужно будет раскрасить (или поменять значок) предыдущие звезды. Плавая каждый элемент вправо, я по существу получаю тот же эффект (html для звезд, таким образом, должен быть написан "назад").
Я использую FontAwesome в этом примере и обмениваюсь между уникодами fa-star-o и fa-star http://fortawesome.github.io/Font-Awesome/
CSS:
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* set all stars to 'empty star' */
.stars-container {
display: inline-block;
}
/* set all stars to 'empty star' */
.stars-container .star {
float: right;
display: inline-block;
padding: 2px;
color: orange;
cursor: pointer;
}
.stars-container .star:before {
content: "\f006"; /* fontAwesome empty star code */
}
/* set hovered star to 'filled star' */
.star:hover:before{
content: "\f005"; /* fontAwesome filled star code */
}
/* set all stars after hovered to'filled star'
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
content: "\f005"; /* fontAwesome filled star code */
}
HTML-код: (40)
В зависимости от вашей точной цели, есть способ достичь полезности родительского селектора без его использования (даже если он должен был существовать)...
скажем, у нас есть:
<div>
<ul>
<li><a>Pants</a></li>
<li><a>Socks</a></li>
<ul>
<li><a>White socks</a></li>
<li><a>Blue socks</a></li>
</ul>
</ul>
</div>
что мы можем сделать, чтобы блок Носков (включая цвета носков) выделялся визуально, используя интервал?
что было бы хорошо, но нет:
ul li ul:parent {
margin-top: 15px;
margin-bottom: 15px;
}
что есть:
li > a {
margin-top: 15px;
display: block;
}
li > a:only-child {
margin-top: 0px;
}
Это устанавливает все якорные ссылки на маржу 15px сверху и сбрасывает его обратно в 0 для тех, у кого нет элементов UL (или других тегов) внутри LIs.
У меня была аналогичная проблема и я обнаружил, что все проблемы такого рода могут быть решены следующим образом:
- дайте всем вашим деталям стиль.
- дайте выбранному элементу стиль.
- дайте следующие элементы стиля с помощью + или ~.
и таким образом Вы сможете создавать свои текущие, предыдущие элементы(все элементы переопределены текущими и следующими элементами) и ваши следующие элементы.
пример:
/* all items (will be styled as previous) */
li {
color: blue;
}
/* the item i want to distinguish */
li.milk {
color: red;
}
/* next items */
li ~ li {
color: green;
}
<ul>
<li>Tea</li>
<li class="milk">Milk</li>
<li>Juice</li>
<li>others</li>
</ul>
надеюсь, это поможет кто-то.
как уже много раз сказано - с div ~ p
все <p>
элементы, которым предшествует <div>
элемент выбран.
проверить этот список всех селекторов CSS.