How to Select Parent Pseudo-Class from Within Child Using SCSS

How to select parent pseudo-class from within child using scss

So seems like this is really easy. Whoops.

You just do the following:

SCSS:

.child {
    .parent:first-child & {
        height: 50px;
    }
}

This probably looks silly, but for my situation, it's actually useful.

Simplified SASS selectors for child pseudo elements?

You can use & again:

.reveal-div {

    border: 2px solid black;
    // I toggle the all-borders-hidden class on the parent/ancestor
    // reveal-div class element
    // The following works, but it's a bit verbose - can it be simplified
    &.all-borders-hidden {
        border: none;
        * {
            border: none;
        }
        &::after{
            border: none;
        }
        &::before{
            border: none;
        }
    }
}

and if they are sharing the border:none you can do this:

.reveal-div {

    border: 2px solid black;
    // I toggle the all-borders-hidden class on the parent/ancestor
    // reveal-div class element
    // The following works, but it's a bit verbose - can it be simplified
    &.all-borders-hidden {
        &,
        *,
        &::before,
        &::after{
            border: none;
        }
    }
}

Is there a CSS parent selector?

The Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation, but is currently not supported by Firefox.

li:has(> a.active) { /* styles to apply to the li tag */ }

As of 2022, Firefox is the only browser not supporting it by default.

In the meantime, you'll have to resort to JavaScript in Firefox if you need to select a parent element with full cross-browser support.

Change css of child on parent's pseudo-element (::after/::before) hover with CSS

pointer-events can help you here

#child {
  color: white;
}

#parent *,
#parent{
  pointer-events: none; /* disable for parent and all childs */
}

#parent::after {
  content: "This";
  color: black;
  pointer-events: initial; /* keep it for the pseudo element */
}

#parent:hover #child { /* the pseudo element will trigger this hover */
  color: black;
}

<div id='parent'>
  <span>Change child color when you hover</span>
  <div id='child'>
    Color
  </div>
</div>

---

Related Topics