# Sibling Selectors

In the following examples, `:hover` could be replaced with.... 

* `:focus-visible` to select siblings of the focused item
* `.w--current` to select siblings of the active nav link, tab link, or anchor link
* `.w-slider-dot.w-active` to select siblings of the active Webflow slider dot
* `.w-lightbox-item.w-lightbox-active` to select siblings of the active lightbox thumbnail
* any other condition or selector you'd like

#### All Previous Siblings

<div align="left"><figure><img src="/files/yUEx8TswBphGZLSkmFiZ" alt="" width="188"><figcaption></figcaption></figure></div>

```css
.item:has(~ :hover) {
    opacity: 0.5;
}
```

#### All Next Siblings

<div align="left"><figure><img src="/files/1vvIdz8HgBzXxpYnqjTB" alt="" width="188"><figcaption></figcaption></figure></div>

```css
.item:hover ~ * {
    opacity: 0.5;
}
```

#### Immediate Next Sibling

<div align="left"><figure><img src="/files/NORYxrONDBHvd3dfafzh" alt="" width="188"><figcaption></figcaption></figure></div>

```css
.item:hover + * {
    opacity: 0.5;
}
```

#### Immediate Previous Sibling

<div align="left"><figure><img src="/files/JpTHgvYWx96ZaovpcRAY" alt="" width="188"><figcaption></figcaption></figure></div>

```css
.item:has(+ :hover) {
    opacity: 0.5;
}
```

#### Sibling After Next Sibling

<div align="left"><figure><img src="/files/hENBwYy3Ac6uiQCRqAwp" alt="" width="188"><figcaption></figcaption></figure></div>

```css
.item:hover + * + * {
    opacity: 0.5;
}
```

#### Sibling Before Previous Sibling

<div align="left"><figure><img src="/files/osUEEO8jYqPvYMvcjWdi" alt="" width="188"><figcaption></figcaption></figure></div>

```css
.item:has(+ * + :hover) {
    opacity: 0.5;
}
```

#### On item hover, select other items within the same parent (items don't need to be siblings)

<div align="left"><figure><img src="/files/3H0EvnKwwsQGDK9xKUq8" alt="" width="188"><figcaption></figcaption></figure></div>

```css
.parent:has(.item:hover) .item:not(:hover) {
    opacity: 0.5;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://css.timothyricks.com/sibling-selectors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.