Using SCSS to target a sibling class when hovering over an element with CSS

Question

Using SCSS to target a sibling class when hovering over an element with CSS

Is there a way to alter styles of a sibling element on hover using only CSS?

I attempted something similar but was unsuccessful.

HTML:

<ul>
   <li class="item active">name1</li>
   <li class="item">name2</li>
   <li class="item">name3</li>
   <li class="item">name4</li>
</ul>

SCSS

ul {
  padding: 0;
  margin: 0;

  li {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;

    &.active {
       background-color: $primary-blue;
       color: white;
    }

    &:hover {
       background-color: $primary-blue;
       color: white;

       ~ .active {
         background-color: white !important;
         color: black !important;
       }
    }
  }
}

I am attempting to change the style of elements on hover while simultaneously removing the style of the currently active element. The active element could be any position in the list, up to 10 elements. This example has been simplified for clarity.

EDIT! IMPORTANT! I have noticed some confusion regarding my request, I hope this plunker will help clarify things :)

https://plnkr.co/edit/RQy04Qv1zy0nukhnlN82

html css sass siblings

Answer 1

Answer №1

To achieve the desired layout using only CSS, utilize the order property in combination with Flexbox or Grid:

ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

li {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
}
 
li:last-child {
  order: -1; /* rearranged to maintain layout */
}
 
.active {
  background-color: blue;
  color: white;
}

li:hover {
  background-color: blue;
  color: white;
}

li:hover ~ .active {
  background-color: white;
  color: black;
}

<ul>
 <li class="item">name2</li>
 <li class="item">name3</li>
 <li class="item">name4</li>
 <li class="item active">name1</li> <!-- must be placed last for ~ selector functionality -->
</ul>

Answer 2

To achieve the desired layout using only CSS, utilize the order property in combination with Flexbox or Grid:

ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

li {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
}
 
li:last-child {
  order: -1; /* rearranged to maintain layout */
}
 
.active {
  background-color: blue;
  color: white;
}

li:hover {
  background-color: blue;
  color: white;
}

li:hover ~ .active {
  background-color: white;
  color: black;
}

<ul>
 <li class="item">name2</li>
 <li class="item">name3</li>
 <li class="item">name4</li>
 <li class="item active">name1</li> <!-- must be placed last for ~ selector functionality -->
</ul>

Answer 3

Answer №2

"My goal is to be able to hover over any element and apply specific styles, while also hiding the active element's style. The active element could be any of the elements in a list of up to 10 items."

Achieving this behavior with CSS alone is possible, however, it requires a layout change as complex interactions using pure CSS involve:

Precise positioning of elements in relation to others, considering parent-child relationships and cascading rules that impact inheritance.
The requirement for unique attributes and default behaviors for certain element groups, types, or tags. Simply applying CSS to a list won't suffice to achieve the desired behavior.

Layout

```
<input id='chx0' type="checkbox" hidden='true'>
```
act as invisible switches controlling the state (specific styles) of other elements. When a checkbox is :checked, all affected elements enter an active state.
```
<label id='btn0' for='chx0'></label>
```
are buttons triggering the associated checkbox via the attribute: for= "chx0"
Due to cascading nature of CSS rules, only sibling elements following the checkboxes can be styled – which essentially includes any next sibling down the DOM tree along with its children/descendants. Think of it like a family hierarchy:

Previous-Element-Sibling <section>Elder Brother</section>

Reference Point 🢂
```
<input id='chx0' type='checkbox'>
```
Next-Element-Sibling <li>Younger Brother</li>

You can target your younger brother but not your older brother.
In Demo 2, there are two checkbox-label pairs:
- ACTIVE / INACTIVE controls the behavior of the .active element.
- ORDER / CHAOS changes the order of <dd> elements (optional and added for demonstration).

While I'm not familiar with SCSS, it appears that you aim to modify the style of sibling elements. However, the general sibling combinator ~ seems to work but lacks the desired effect: white background with black text. In this demo, the adjacent sibling combinator + is used with inverted colors for better visibility of changes.

Demo 1

ul {
  padding: 0;
  margin: 0;
}

li {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
}

li.active {
  background-color: blue;
  color: white;
}

li:hover {
  background-color: blue;
  color: white;
}

li:hover+li {
  background-color: black !important;
  color: white !important;
}

<ul>
  <li class="item active">name1</li>
  <li class="item">name2</li>
  <li class="item">name3</li>
  <li class="item">name4</li>
</ul>

Demo 2

.dataList {
  display: flex;
  flex-flow: column nowrap;
}

.btn {
  background: rgba(0, 0, 0, 0);
  padding: 3px 5px;
  margin: 20px 0 -15px 30px;
  border: 2px ridge grey;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  width: 12ch;
  text-align: center;
}

#btn0::before {
  content: 'ACTIVE';
  color: green;
}

#chx0:checked~#btn0::before {
  content: 'INACTIVE';
  color: tomato;
}

#btn1::before {
  content: 'ORDER';
  color: blue;
}

#chx1:checked~#btn1::before {
  content: 'CHAOS';
  color: orange;
}

#chx1:checked~.dataList dd:nth-of-type(1) {
  order: 8
}

#chx1:checked~.dataList dd:nth-of-type(2) {
  order: 5
}

#chx1:checked~.dataList dd:nth-of-type(3) {
  order: 6
}

#chx1:checked~.dataList dd:nth-of-type(4) {
  order: 10
}

#chx1:checked~.dataList dd:nth-of-type(5) {
  order: 3
}

#chx1:checked~.dataList dd:nth-of-type(6) {
  order: 2
}

#chx1:checked~.dataList dd:nth-of-type(7) {
  order: 4
}

#chx1:checked~.dataList dd:nth-of-type(8) {
  order: 1
}

#chx1:checked~.dataList dd:nth-of-type(9) {
  order: 7
}

#chx1:checked~.dataList dd:nth-of-type(10) {
  order: 9
}

.data {
  color: white;
  background: rgba(0, 0, 0, 0.8);
  border: 2px inset white;
  padding: 3px 5px
}

.active {
  color: gold;
  border: 2px ridge gold;
  background: rgba(0, 0, 0, 1);
}

.active::after {
  content: ' is ACTIVE';
  font-weight: 900;
}

#chx0:checked~.dataList:hover .data.active {
  border: 2px inset white;
  color: white;
  background: rgba(0, 0, 0, 0.8);
}

#chx0:checked~.dataList:hover .active::after {
  content: '';
  font-weight: normal;
}

.data:hover {
  color: #000;
  background: #fff;
}

.data.active:hover {
  color: lime;
  border-color: lime;
  background: #000;
}

#chx0:checked~.dataList .data.active:hover {
  color: #000;
  background: #fff;
}

.data.hovered {
  color: yellow;
}

<input id='chx0' type='checkbox' hidden='true'>
<input id='chx1' type='checkbox' hidden='true'>

<label id='btn0' class='btn' for='chx0'></label>
<label id='btn1' class='btn' for='chx1'></label>

<dl class='dataList'>
  <dt class='data term'>DATA LIST</dt>
  <dd class='data'>ITEM 0</dd>
  <dd class='data'>ITEM 1</dd>
  <dd class='data'>ITEM 2</dd>
  <dd class='data'>ITEM 3</dd>
  <dd class='data active'>ITEM 4</dd>
  <dd class='data'>ITEM 5</dd>
  <dd class='data'>ITEM 6</dd>
  <dd class='data'>ITEM 7</dd>
  <dd class='data'>ITEM 8</dd>
  <dd class='data'>ITEM 9</dd>
</dl>

Answer 4

"My goal is to be able to hover over any element and apply specific styles, while also hiding the active element's style. The active element could be any of the elements in a list of up to 10 items."

Achieving this behavior with CSS alone is possible, however, it requires a layout change as complex interactions using pure CSS involve:

Precise positioning of elements in relation to others, considering parent-child relationships and cascading rules that impact inheritance.
The requirement for unique attributes and default behaviors for certain element groups, types, or tags. Simply applying CSS to a list won't suffice to achieve the desired behavior.

Layout

```
<input id='chx0' type="checkbox" hidden='true'>
```
act as invisible switches controlling the state (specific styles) of other elements. When a checkbox is :checked, all affected elements enter an active state.
```
<label id='btn0' for='chx0'></label>
```
are buttons triggering the associated checkbox via the attribute: for= "chx0"
Due to cascading nature of CSS rules, only sibling elements following the checkboxes can be styled – which essentially includes any next sibling down the DOM tree along with its children/descendants. Think of it like a family hierarchy:

Previous-Element-Sibling <section>Elder Brother</section>

Reference Point 🢂
```
<input id='chx0' type='checkbox'>
```
Next-Element-Sibling <li>Younger Brother</li>

You can target your younger brother but not your older brother.
In Demo 2, there are two checkbox-label pairs:
- ACTIVE / INACTIVE controls the behavior of the .active element.
- ORDER / CHAOS changes the order of <dd> elements (optional and added for demonstration).

While I'm not familiar with SCSS, it appears that you aim to modify the style of sibling elements. However, the general sibling combinator ~ seems to work but lacks the desired effect: white background with black text. In this demo, the adjacent sibling combinator + is used with inverted colors for better visibility of changes.

Demo 1

ul {
  padding: 0;
  margin: 0;
}

li {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
}

li.active {
  background-color: blue;
  color: white;
}

li:hover {
  background-color: blue;
  color: white;
}

li:hover+li {
  background-color: black !important;
  color: white !important;
}

<ul>
  <li class="item active">name1</li>
  <li class="item">name2</li>
  <li class="item">name3</li>
  <li class="item">name4</li>
</ul>

Demo 2

.dataList {
  display: flex;
  flex-flow: column nowrap;
}

.btn {
  background: rgba(0, 0, 0, 0);
  padding: 3px 5px;
  margin: 20px 0 -15px 30px;
  border: 2px ridge grey;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  width: 12ch;
  text-align: center;
}

#btn0::before {
  content: 'ACTIVE';
  color: green;
}

#chx0:checked~#btn0::before {
  content: 'INACTIVE';
  color: tomato;
}

#btn1::before {
  content: 'ORDER';
  color: blue;
}

#chx1:checked~#btn1::before {
  content: 'CHAOS';
  color: orange;
}

#chx1:checked~.dataList dd:nth-of-type(1) {
  order: 8
}

#chx1:checked~.dataList dd:nth-of-type(2) {
  order: 5
}

#chx1:checked~.dataList dd:nth-of-type(3) {
  order: 6
}

#chx1:checked~.dataList dd:nth-of-type(4) {
  order: 10
}

#chx1:checked~.dataList dd:nth-of-type(5) {
  order: 3
}

#chx1:checked~.dataList dd:nth-of-type(6) {
  order: 2
}

#chx1:checked~.dataList dd:nth-of-type(7) {
  order: 4
}

#chx1:checked~.dataList dd:nth-of-type(8) {
  order: 1
}

#chx1:checked~.dataList dd:nth-of-type(9) {
  order: 7
}

#chx1:checked~.dataList dd:nth-of-type(10) {
  order: 9
}

.data {
  color: white;
  background: rgba(0, 0, 0, 0.8);
  border: 2px inset white;
  padding: 3px 5px
}

.active {
  color: gold;
  border: 2px ridge gold;
  background: rgba(0, 0, 0, 1);
}

.active::after {
  content: ' is ACTIVE';
  font-weight: 900;
}

#chx0:checked~.dataList:hover .data.active {
  border: 2px inset white;
  color: white;
  background: rgba(0, 0, 0, 0.8);
}

#chx0:checked~.dataList:hover .active::after {
  content: '';
  font-weight: normal;
}

.data:hover {
  color: #000;
  background: #fff;
}

.data.active:hover {
  color: lime;
  border-color: lime;
  background: #000;
}

#chx0:checked~.dataList .data.active:hover {
  color: #000;
  background: #fff;
}

.data.hovered {
  color: yellow;
}

<input id='chx0' type='checkbox' hidden='true'>
<input id='chx1' type='checkbox' hidden='true'>

<label id='btn0' class='btn' for='chx0'></label>
<label id='btn1' class='btn' for='chx1'></label>

<dl class='dataList'>
  <dt class='data term'>DATA LIST</dt>
  <dd class='data'>ITEM 0</dd>
  <dd class='data'>ITEM 1</dd>
  <dd class='data'>ITEM 2</dd>
  <dd class='data'>ITEM 3</dd>
  <dd class='data active'>ITEM 4</dd>
  <dd class='data'>ITEM 5</dd>
  <dd class='data'>ITEM 6</dd>
  <dd class='data'>ITEM 7</dd>
  <dd class='data'>ITEM 8</dd>
  <dd class='data'>ITEM 9</dd>
</dl>

Answer 5

Answer №3

It seems that including the ampersand in the active selector may be necessary, like this:

li {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;

    &.active {
       background-color: $primary-blue;
       color: white;
    }

    &:hover {
       background-color: $primary-blue;
       color: white;

       ~ &.active {
         background-color: white !important;
         color: black !important;
       }
    }
  }

Answer 6

It seems that including the ampersand in the active selector may be necessary, like this:

li {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;

    &.active {
       background-color: $primary-blue;
       color: white;
    }

    &:hover {
       background-color: $primary-blue;
       color: white;

       ~ &.active {
         background-color: white !important;
         color: black !important;
       }
    }
  }

Using SCSS to target a sibling class when hovering over an element with CSS

Answer №1

Answer №2

Layout

Demo 1

Demo 2

Answer №3

Similar questions

Expanding list item with jQuery

Why is my AngularJS application triggering two events with a single click?

A step-by-step guide on initializing and setting a cookie value with expiration

Refresh a row in real-time by utilizing a modal with JavaScript or jQuery

What is the best way to ensure grid element takes up 100% of the available height within a flex column

Customize WordPress pages by adding a variety of unique logos for a

Scrapy and Python data gets corrupted by <br> tags causing issues

When clicking on a different tab, the Bootstrap tab will shift to the left, outlining the new selection

Issue with JQuery's click and submit events not triggering, but change event is working fine

Task: Choose MySQL option and Retrieve JSON data

In what ways can the current theme be utilized to optimize spacing?

I am attempting to add user input to the parent container when the button is clicked, but for some reason it is

The styling for buttons links is malfunctioning

Is it possible to place a secondary read more button next to the first one using CSS?

Challenges arise when using two side-by divs with a 100% height

Display HTML content generated by JavaScript in the page source

A straightforward jQuery conditional statement for dynamically generated content

Activate the preview mode by transmitting information between two controllers

illuminate selected row in datatable using a jquery plugin

Updating the text of an element will occur only when the specified condition has been met