Day 91: a previous sibling selector with :has()

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

I’ve already shown much appreciation for the :has() pseudo-class in this series, but that we can use it as a previous sibling selector tops it all of.

Since this is not an official selector, but more something like a hack, it can be hard to read and interpret. So, let’s start nice and easy.

We have three buttons. If we hover/focus one button and we want to highlight it and the next adjacent button in the DOM at the same time, we can use the adjacent sibling selector.

  button {
    outline-width: 8px;
    outline-offset: 4px;
    outline-color: hotpink;
  }

  button:is(:hover, :focus-visible) {
    outline-style: solid;
  }

  button:is(:hover, :focus-visible) + button {
    outline-style: dashed;
  }

There's no previous item selector, but using :has() we can select an item that comes before another item. I've written about next-sibling combinators and :has() on day 26. Here’s an example from that post: The following code sets the block-end margin of all <h2> to 0 if they're followed by a <time> element.

h2 {
  margin-block-end: 0.7em; 
}

h2:has(+ time) {
  margin-block-end: 0;
}

<h2>Heading</h2>
<p>Teaser text</p>

<h2>Heading</h2>
<time>31.10.2022</time>
<p>Teaser text</p>

If we want to use this in our button example, we have to select a <button> followed by a <button> in the :hover or :focus-visible state.

  button:is(:hover, :focus-visible) {
    outline-style: solid;
  }

  button:is(:hover, :focus-visible) + button {
    outline-style: dashed;
  }

  button:has(+ button:is(:hover, :focus-visible)) {
    outline-style: dotted;
  }

If we have more buttons and we want to select the button that comes before the previous button, we can extend our selector.

  button:has(+ button + button:is(:hover, :focus-visible)) {
    /* styles */
  }

What a beauty!

Here are a couple of other demos:

See the Pen Day 91: previous sibling selector with :has() #100DaysOfMoreOrLessModernCSS by Manuel Matuzovic (@matuzo) on CodePen.

See the Pen selecting previous item using CSS by pourya (@pouriversal) on CodePen.

See the Pen BUBBLE (previous siblings!) by Chris Coyier (@chriscoyier) on CodePen.

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2023-01-30T09:38:54+00:00) Day 91: a previous sibling selector with :has(). Retrieved from https://www.scien.cx/2023/01/30/day-91-a-previous-sibling-selector-with-has/

MLA

" » Day 91: a previous sibling selector with :has()." Manuel Matuzović | Sciencx - Monday January 30, 2023, https://www.scien.cx/2023/01/30/day-91-a-previous-sibling-selector-with-has/

HARVARD

Manuel Matuzović | Sciencx Monday January 30, 2023 » Day 91: a previous sibling selector with :has()., viewed ,<https://www.scien.cx/2023/01/30/day-91-a-previous-sibling-selector-with-has/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 91: a previous sibling selector with :has(). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/30/day-91-a-previous-sibling-selector-with-has/

CHICAGO

" » Day 91: a previous sibling selector with :has()." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/30/day-91-a-previous-sibling-selector-with-has/

IEEE

" » Day 91: a previous sibling selector with :has()." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/30/day-91-a-previous-sibling-selector-with-has/. [Accessed: ]

rf:citation

» Day 91: a previous sibling selector with :has() | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/01/30/day-91-a-previous-sibling-selector-with-has/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.