Is there a "previous sibling" CSS selector?

+ is for the next sibling. Is there an equivalent for the previous sibling?

---

No, there is no "previous sibling" selector.

On a related note, ~ is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. + is for next sibling and is CSS2.1.

See Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.

---

I found a way to style all previous siblings (opposite of ~ ) that may work depending on what you need.

Let's say you have a list of links and when hovering on one, all the previous ones should turn red. You can do it like this:

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

---

Selectors level 4 introduces :has() (previously the subject indicator ! ) which will allow you to select a previous sibling with:

previous:has(+ next) {}

… but at the time of writing, it is some distance beyond the bleeding edge for browser support.

链接地址: http://www.djcxy.com/p/3904.html

上一篇: 具有类的第一个元素的CSS选择器

下一篇: 有没有“以前的兄弟”CSS选择器？