Есть ли селектор «предыдущий брат»?
OMG, все ответы здесь, предлагающие вам изменить порядок элементов html, а затем использовать CSS, чтобы они выглядели задом наперед, являются настоящим натяжением. Конечно, это не указывает на вопрос, но большинство вопросов «Можете ли вы сделать X с помощью CSS» должны предполагать, что вы не можете изменить HTML структурно.
@squarecandy, я в основном согласен с вашим комментарием. Но решения, которые вы называете неадекватными, тем не менее, в некоторых случаях полезны (обратите внимание на отрицательные отзывы). Так что их стоит опубликовать. То, что вы видите как «настоящий натяжение», может быть «творческим решением» для других.
Нет, селектор «предыдущий брат» отсутствует.
С другой стороны, ~ это для родного брата-наследника (имеется в виду, что элемент идет после этого, но не обязательно сразу после) и является селектором CSS3. + для следующего родного брата и CSS2.1.
Из стандарта CSS3: элементы, представленные двумя последовательностями, имеют одного и того же родителя в дереве документа, и элемент, представленный первой последовательностью, предшествует (не обязательно сразу) элементу, представленному второй.
Полезная для этого функция jquery: prev (). Например, $ («# the_element»). Prev (). Css («background-color», «red»)
Я нашел способ стилизовать всех предыдущих братьев и сестер (напротив ~ ), которые могут работать в зависимости от того, что вам нужно.
Допустим, у вас есть список ссылок, и при наведении на одну из них все предыдущие должны стать красными. Вы можете сделать это так:
/* 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; > class="parent"> href="#">link href="#">link href="#">link href="#">link href="#">link Вы можете добавить объяснение того, как это работает. (кажется, что вы применяете стиль ко всем элементам и к следующим элементам, но он может быть подробно описан)
Отличное решение. Нет необходимости переупорядочивать элементы в разметке или в рендере (через float:right ). Для этого потребовался пробел между единицами / словами и отступами вместо полей, но он работает совершенно иначе!
@ Линн ответ включает только код, чтобы сделать предыдущие ссылки красным при наведении курсора. Дополнительные стили зависят от вашего варианта использования. Для компонента звездного рейтинга (который, я полагаю, является распространенным случаем) вам необходимо избавиться от этого места, а также сделать красным ссылку.
Селектор уровня 4 вводит :has() (ранее индикатор предмета ! ), который позволит вам выбрать предыдущего брата с:
. но на момент написания этой статьи, это некое преимущество за пределами поддержки браузеров.
«Чувствительность для поддержки браузера» может быть преувеличением. На момент написания этой статьи даже самая последняя версия Chrome не могла использовать :has() псевдокласс.
msgstr «: has не помечен как часть профиля динамического селектора, что означает, что его нельзя использовать в таблицах стилей; только с такими функциями, как document.querySelector ().» — developer.mozilla.org/en-US/docs/Web/CSS/:has
Рассмотрим order свойство гибких и сеточных макетов.
Я сосредоточусь на flexbox в примерах ниже, но те же понятия применимы к Grid.
С помощью flexbox можно смоделировать предыдущий селектор брата.
В частности, order свойство flex может перемещать элементы по экрану.
Вы хотите, чтобы элемент A стал красным, когда элемент B наведен.
- Сделайте ul гибкий контейнер.
li:hover + li background-color: red; >. и вуаля! Предыдущий родной селектор рождается (или, по крайней мере, имитируется).
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; >5.4. Порядок отображения: order собственность
Элементы Flex по умолчанию отображаются и располагаются в том же порядке, в котором они отображаются в исходном документе. order Свойство может быть использовано для изменения этого порядка.
В order управляет свойство порядок , в котором гибкие элементы появляются в гибком контейнере, назначая их порядковые группы. Он принимает одно значение, которое указывает, к какой порядковой группе относится элемент flex.
Начальное order значение для всех элементов flex — 0.
Примеры «предыдущих селекторов братьев и сестер», созданных с помощью order свойства flex .
.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; > Using the flex order property to construct a previous sibling selector class="container"> class="box box1"> 1