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

Vertically and horizontally align an SVG within 2 divs without modifying the parent div of the SVG

Ways to insert a hyperlink within a div element

Remove the "href" from Zend2 navigation functionality

How to customize the color of the clock symbol in a MUI TextField set to type 'time'

Contact form repair completed - Messages successfully delivered

How can I assign a value other than a string to a placeholder or vue property?

What's causing ng-show to malfunction in IE11 on AngularJS?

Encircle a circle within the Progress Tracker

Problem with traversing from parent to children elements using jQuery selectors

Compatibility of Blackberry Webworks

Lean/Tilt just the lower portion of the division

At times, the Kendo UI Tooltip may linger on screen longer than expected, failing to disappear as

Creating a dynamic shift in background color

JQuery method for altering currentTime's format

Implementing CSS styles to Iframe content

Ways to prevent negative values from appearing in the text field

What is the best way to retrieve upload progress information with $_FILES?

Changing the sliding underline effect in a jQuery navigation bar

Incorporating and designing a side button using jQuery Mobile

The <input> element is not functioning as expected when attempting to use it as a button. I am struggling to find the solution to