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

Вот как я это сделал

import java.util.ArrayList;
import java.util.Random;

public class Test {
    public static void main(String[] args) {
        int size = 20;

        ArrayList<Integer> list = new ArrayList<Integer>(size);
        for(int i = 1; i <= size; i++) {
            list.add(i);
        }

        Random rand = new Random();
        while(list.size() > 0) {
            int index = rand.nextInt(list.size());
            System.out.println("Selected: "+list.remove(index));
        }
    }
}

Как отметил уважаемый мистер Скит: Если n - количество случайно выбранных номеров, которые вы хотите выбрать, и N - общее пространство выборки доступных для выбора чисел:

  1. Если n & lt; N , вы должны просто сохранить числа, которые вы выбрали, и проверить список, чтобы узнать, находится ли в нем выбранный номер.
  2. Если n ~ = N , вы, вероятно, должны использовать мой метод, заполнив список, содержащий все пространство выборки, а затем удалите из него номера по мере их выбора.
1038
задан Dmitry Gonchar 7 December 2015 в 16:06
поделиться

14 ответов

Нет, селектор «предыдущего сиблинга» отсутствует.

В соответствующей заметке ~ используется для общего брака-последователя (это означает, что элемент появляется после этого, но не обязательно сразу после) и является селектором CSS3. + для следующего родного брата и является CSS2.1.

См. Комбинированный смежный блок-класс из Селектора уровня 3 и 5.7 Смежные селекторные ролики из Каскадные таблицы стилей Уровень 2 Редакция 1 (CSS 2.1) Спецификация .

668
ответ дан Domenic 17 August 2018 в 11:45
поделиться
  • 1
    Из стандарта CSS3: Элементы, представленные двумя последовательностями , совместно используют один и тот же родительский элемент в дереве документов, а элемент, представленный первой последовательностью , предшествует (не обязательно сразу ) элемент, представленный вторым. – Lie Ryan 26 February 2011 в 17:34
  • 2
    @Lie Ryan: Да, но пункт cletus делает в его ответе, что вы не выбираете предыдущий элемент. – BoltClock♦ 29 March 2011 в 22:05
  • 3
    Вот пример, который я сделал, чтобы понять, что это может и не может сделать. jsfiddle.net/NuuHy/1 – Abacus 17 July 2013 в 19:26
  • 4
    Функция jquery, полезная для этого, - prev (). Например, $ («# the_element»). Prev (). Css («background-color», «red») – Satbir Kira 18 May 2015 в 21:11
  • 5
    В зависимости от вашей разметки это может помочь: stackoverflow.com/questions/42680881/… – samnau 18 April 2018 в 14:09

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

Что вы можете сделать, это использовать селектор CSS3: псевдо classe 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>

Ограничения

  • Вы не можете выбрать предыдущие элементы основанный на классах следующих элементов
  • Это то же самое для псевдо классов
11
ответ дан allicarn 17 August 2018 в 11:45
поделиться
  • 1
    Почему они должны быть одним и тем же узлом? Почему бы просто не использовать :nth-child(-n+4)? – Ian 27 October 2014 в 21:13
  • 2
    @Ian, потому что :nth-child(-n+4) является псевдо-классом, который должен применяться к селектору для правильной работы. Если вы не убедите, попробуйте поэкспериментировать, используя вилку своей скрипки, и вы увидите, что она не будет – 0x1gene 28 October 2014 в 01:11
  • 3
    Фактически, вы можете использовать независимый тип узла, используя селектор *, но это неприятная практика. – Josh Burgess 13 January 2015 в 20:07
  • 4
    Это ответ, который работал для меня, не знаю, почему он не проголосовали выше или не принят. – Jake Cattrall 23 January 2015 в 15:59
  • 5
    Фактически, он работает для разных узлов: jsfiddle.net/aLhv9r1w/316 . Обновите свой ответ :) – Jamie Barker 1 June 2015 в 10:44

К сожалению, нет «предыдущего» селектора, но вы можете , возможно, получить тот же эффект, используя позиционирование (например, float right). Это зависит от того, что вы пытаетесь сделать.

В моем случае я хотел получить первую 5-звездочную рейтинговую систему CSS. Мне нужно было бы покрасить (или поменять значок) предыдущих звезд. Если плавать каждый элемент вправо, я по сути получаю тот же эффект (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)

JSFiddle: http://jsfiddle.net/andrewleyva/88j0105g/

2
ответ дан Andrew Leyva 17 August 2018 в 11:45
поделиться
  • 1
    float right и + или ~ выбирают меня как самую чистую работу. – Wylliam Judd 1 November 2017 в 22:12

Уровень 4 выбора вводит :has() (ранее индикатор объекта !), который позволит вам выбрать предыдущего брата с:

previous:has(+ next) {}

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

119
ответ дан BoltClock 17 August 2018 в 11:45
поделиться
  • 1
    Реальный ответ: селектора css разработаны, чтобы быть легкими (быстрыми) для реализации для браузера. Документ можно перемещать один раз , сопоставляя элементы по ходу, без необходимости возвращаться назад, чтобы настроить соответствие. – chowey 12 August 2013 в 04:55
  • 2
    «Кровотечение для поддержки браузера» может быть завышенным. Начиная с написания этого, даже последняя версия Chrome не может использовать псевдо-класс :has(). – Reed Martin 20 January 2017 в 08:59
  • 3
    Селектор :has() будет специально не использоваться в таблицах стилей, т. Е. Вы сможете использовать его в Javascript – James Tudsbury 13 June 2017 в 13:35
  • 4
    @chowey - ваш компьютер может обрабатывать безумные видеоигры с бесчисленными математическими вычислениями при высоком FPS, но браузер едва справляется с укладкой предыдущих элементов в CSS. какая ирония. – vsync 20 June 2017 в 10:09
  • 5
    @ReedMartin - Вот почему я сказал некоторое расстояние за пределы кровоточащего края – Quentin 20 June 2017 в 10:18

У меня был тот же вопрос, но потом у меня был момент «духа». Вместо записи

x ~ y

напишите

y ~ x

Очевидно, что это соответствует «x» вместо «y», но отвечает «есть ли совпадение?». вопрос и простой обход DOM могут привести вас к правильному элементу более эффективно, чем цикл в javascript.

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

65
ответ дан Bryan Larsen 17 August 2018 в 11:45
поделиться
  • 1
    Я считаю, что это работает, когда можно легко найти. Проблема в том, что y можно найти только по отношению к x, и, обратив его, вы не можете найти y, потому что вам нужно сначала найти x. Это, конечно, относится к вопросу о том, что y является предшественником родного брата, а не следующим, но может также применяться для того, чтобы y являлся следующим братом. – David 12 February 2013 в 21:14
  • 2
    Ты будешь суровым, суровым. (извините, не смог удержаться.) Дело в том, что иногда вам просто нужно знать, что «существует ли существует?». В других случаях вы можете использовать & quot;: before & quot; поставить что-то между этими двумя элементами. Наконец, если вам нужно перейти в jQuery, используйте find (& quot; y ~ x & quot;). Prev () проще, чем многие альтернативы. – Bryan Larsen 13 March 2013 в 11:04
  • 3
    Идея предыдущего селектора-сиблинга заключается в том, что он выберет предыдущий элемент. К сожалению, обращение вспять, как описано здесь, не обеспечивает эту функциональность. – Zenexer 31 July 2013 в 01:56
  • 4
    Спасибо @Zenexer за разъяснение, что этот ответ не дает реального решения первоначального вопроса, я начал чувствовать себя глупо, думая о том, как y ~ x может решить мою проблему – Jaime Hablutzel 23 April 2014 в 22:20
  • 5
    Я понимаю идею этого ответа, однако рассуждения, приведенные в ответе, не совсем понятны. Селектор y ~ x не отвечает «есть ли совпадение» & quot; вопрос, потому что два приведенных здесь селектора означают совершенно разные вещи. Нет никакого способа y ~ x, когда-либо создавшего соответствие, например, поддерева <root><x/><y/></root>. Если вопрос «существует ли y существует?» то селектор просто y. Если вопрос «существует ли y существует, если имеется один член x в любой произвольной позиции?» то вам понадобится оба селектора. (Хотя, может быть, я просто задираю в этот момент ...) – BoltClock♦ 27 October 2015 в 10:23

В зависимости от вашей конкретной цели существует способ достижения полезности родительского селектора без использования одного (даже если бы он существовал) ...

Скажем, у нас есть:

<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>

Что мы можем сделать, чтобы блок Socks (включая цвета носка) выделялся визуально с использованием интервала?

Что было бы неплохо, но не существует:

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 (или других тегов) внутри LI.

1
ответ дан falsarella 17 August 2018 в 11:45
поделиться

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

  1. дает всем вашим элементам стиль.
  2. дает выбранный вами item style.
  3. дает следующие элементы стиль с использованием + или ~.

, и таким образом вы сможете стилизовать свои текущие предыдущие элементы (все элементы переопределены текущими и следующими элементами) и ваши следующие элементы.

пример:

/* 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>

Надеюсь, что это кому-то поможет.

0
ответ дан Hejar 17 August 2018 в 11:45
поделиться

Если вы знаете точную позицию, будет работать исключение из всех следующих братьев :nth-child().

ul li:not(:nth-child(n+3))

Что бы выбрать все li s до третьего (например, 1-го и 2-го) , Но, по-моему, это выглядит уродливым и очень плотным.

Вы также можете выбрать n-й-правый справа налево:

ul li:nth-child(-n+2)

Что делает то же самое .

4
ответ дан kernel 17 August 2018 в 11:45
поделиться

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

Допустим, у вас есть список ссылок и при падении на одном, все предыдущие должны стать красными. Вы можете сделать это следующим образом:

/* 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>

160
ответ дан mantish 17 August 2018 в 11:45
поделиться
  • 1
    Вы можете добавить объяснение того, как это работает. (кажется, что вы применяете стиль ко всем элементам и к следующим элементам, но это может быть описано явно) – A.L 24 April 2015 в 17:04
  • 2
    Вот сценарий для того, что я упомянул выше: jsfiddle.net/y9zeLr1n – Steven Vachon 19 May 2015 в 15:13
  • 3
    да, но один предыдущий нужен большую часть времени НЕ ВСЕ предыдущие! – azerafati 1 May 2016 в 15:15
  • 4
    Все ссылки становятся красными, если я нахожусь над пространством между ними, для меня. – Lynn 1 August 2016 в 08:19
  • 5
    @Lynn ответ включает только код, чтобы сделать предыдущие ссылки красными на зависании. Дополнительные стили зависят от вашего варианта использования. Для компонента рейтинга звезды (который, как я полагаю, является обычным делом), вам нужно будет избавиться от этого пространства, а также сделать красную зависающую ссылку. – mantish 4 August 2016 в 10:23

Рассмотрим свойство order схем flex и grid.

В приведенных ниже примерах я сосредоточусь на flexbox, но те же понятия применимы к Grid.


С помощью flexbox можно смоделировать предыдущий селектор сиблинга.

В частности, свойство flex order может перемещать элементы вокруг экрана.

Пример:

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

<ul>
    <li>A</li>
    <li>B</li>
</ul>

ШАГИ

  1. Сделайте контейнер ul гибким.
    ul { display: flex; }
    

  1. Отменить порядок братьев и сестер в надписи.
    <ul>
       <li>B</li>
       <li>A</li>
    </ul>
    

  1. Используйте селектор для подключения к элементу A (~ или +).
    li:hover + li { background-color: red; }
    

  1. Используйте свойство flex order, чтобы восстановить порядок братьев и сестер на визуальном дисплее.
    li:last-child { order: -1; }
    

... и 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>

Из спецификации flexbox:

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

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

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

Начальное значение 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 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


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
  • Медиа: визуальный
  • Вычисленное значение: как указано

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

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

Элементы, которые являются элементами гибких элементов или , могут создавать (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.

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

99
ответ дан Michael_B 17 August 2018 в 11:45
поделиться
  • 1
    Свойство order не является решением, поскольку оно предназначено только для изменения порядка visual , поэтому он not восстанавливает первоначальный семантический порядок, который вы вынуждены изменить в HTML для этого обходного пути для работы. – Marat Tanalin 20 March 2016 в 22:47
  • 2
    @Marat Tanalin: для 90% случаев использования, предполагая, что поддержка браузера не является проблемой, это будет работать нормально. Остальные 10% случаев использования - это 1) случаи, когда изменение визуального порядка не является решением, или 2) случаями, которые вообще не связаны с CSS. К счастью, для # 2, selectors-4 предоставляет: has (), и это просто разработчикам селекторных библиотек для его реализации. – BoltClock♦ 21 March 2016 в 05:52
  • 3
    Имейте в виду, что CSS2.2 ED, который вы цитируете, по существу, еще CSS2. И flexbox и grid layout не существуют в CSS2, так что, насколько это касается CSS2, эта информация, безусловно, сохраняется. По крайней мере, текст можно было бы обновить, указав, что z-index может применяться к другим типам элементов на будущих уровнях CSS, так же, как он говорит, что другие свойства могут устанавливать контекст стекирования, например непрозрачность. – BoltClock♦ 21 March 2016 в 06:05
  • 4
    В случае, если у кого-то возникли проблемы с пониманием, когда z-index будет работать, даже когда «omg» нет position указано! », Спецификация упоминает концепцию stacking context , которая хорошо объясняется в этой статье о MDN – Rogier Spieker 28 April 2016 в 17:45
  • 5
    @Michael_B, пожалуйста! Я имел дело с большим количеством сторонников, не подозревающих об этом. Еще одна вещь, которую я хотел бы упомянуть, faux previous sibling selector также прекрасно работает с float: right (или любыми другими средствами для отмены порядка, из которых flex/order имеет мало (наименьшее?)) побочные эффекты). Взбитые два скрипта: , демонстрирующие подход float: right и , демонстрирующий direction: rtl – Rogier Spieker 28 April 2016 в 17:57

Как уже говорилось много раз - с div ~ p выбраны все элементы <p>, которым предшествует элемент <div>.

Проверьте этот список все селектор CSS.

-1
ответ дан Nesha Zoric 17 August 2018 в 11:45
поделиться
  • 1
    Нет, вы попробовали? Он не выбирает предшествующие элементы, а следующие . – Soaku 21 April 2018 в 15:57

Два трюка . В основном, инвертирование 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>

20
ответ дан Roko C. Buljan 17 August 2018 в 11:45
поделиться

+ для следующего брата. Есть ли эквивалент для предыдущего брата?

Вы можете использовать два селектора ax : ! и ?

Там 2 следующие селекторные функции для сиблинга в обычном CSS:

  • + является непосредственным последующим селектором сиблинга
  • ~ является любым последующим селектором сиблинга

. В обычном CSS нет предыдущего селектора sibling.

Однако в ax CSS послепроцессорной библиотеки есть 2 предыдущие селекторные функции:

  • ? - это предыдущий селектор немедленного (напротив +)
  • ! является любым предыдущим селектором (см. ~)

Рабочий пример:

В следующем примере:

  • .any-subsequent:hover ~ div выбирает любой последующий div
  • .immediate-subsequent:hover + div выбирает немедленный последующий div
  • .any-previous:hover ! div выбирает любой предыдущий 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>

12
ответ дан TylerH 17 August 2018 в 11:45
поделиться
  • 1
    Это дает мне синтаксическую ошибку, когда я пытаюсь реализовать ее по sass внутри проекта rails. – alex 5 September 2017 в 22:57
  • 2
    ax - постпроцессор CSS. Он не использует тот же синтаксис, что и предварительные процессоры CSS, такие как Sass, Less или Stylus. – Rounin 6 September 2017 в 15:11

Другое решение 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>

11
ответ дан Vadim Ovchinnikov 17 August 2018 в 11:45
поделиться
Другие вопросы по тегам:

Похожие вопросы: