blockquote>
+
для следующего брата. Есть ли эквивалент для предыдущего брата?Вы можете использовать два селектора 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>