Kevin Powell - Community•12mo ago

Select a pseudo-element's "owner" (css nesting)

Hey! I just wanted to know, when nested in some pseudo-elements rule, is it possible to access its "owner" (select #owner:hover::after when in #owner::after, for instance)? That's more a question about CSS than a problem, I'm just curious.

17 Replies

Wolle•12mo ago

Maybe with :has(::after)?

ZpibooOP•12mo ago

It doesn't work, actually I don't think it's possible

clevermissfox•12mo ago

I think I’ve seen on a KP video that you can’t select that way at least in scss if I remember right.

ZpibooOP•12mo ago

Guess I'd just stick with that then

#element {
  &::after {
    /* Styles */
  }
  &:hover::after {
    /* Styles for when #element is hovered */
  }
}

#element {
  &::after {
    /* Styles */
  }
  &:hover::after {
    /* Styles for when #element is hovered */
  }
}

I'm waiting till tomorrow to mark this as solved, just in case

MarkBoots•12mo ago

yea, this is the way. can't get out of a nest looking up

ZpibooOP•12mo ago

If it were just a direct child of the #element, :hover > & would've worked, I was wondering if there was a way to do that with pseudo-elements, but coming up with that wasn't a problem

MarkBoots•12mo ago

yea, i know, but with pseudo's unfortunatly not

ZpibooOP•12mo ago

Anyway thank y'all guys Yea

MarkBoots•12mo ago

good luck

ZpibooOP•12mo ago

Should I close the post?

Jochem•12mo ago

just add the solved tag

ZpibooOP•12mo ago

Okay

ἔρως•12mo ago

are you working with css or sass/scss? if you're working with scss, it's actually possible to do what you want however, i VERY STRONGLY recommend that you do not do it, as the code becomes a convoluted mess an alternative could be to do this:

#element {
  &::after {
    /* styles */
  }
  
  &:hover {
    /* styles for when #element is hovered */
    &::after {
      /* styles for the ::after when #element is hovered */
    }
  }
}

#element {
  &::after {
    /* styles */
  }
  
  &:hover {
    /* styles for when #element is hovered */
    &::after {
      /* styles for the ::after when #element is hovered */
    }
  }
}

i do use the selectors like this, but only when i have styles to apply to :hover, which you often do this way, you can also easily re-use the :hover to, for example, style a child element, like this:

#element {
  &:hover {
    &::after { ... }
    svg { ... }
  }
}

#element {
  &:hover {
    &::after { ... }
    svg { ... }
  }
}

and if someone says "butt muh 80 chars colms", i will roll my eyes as 80 columns of text hasnt been a problem since 1280x1080 was invented (just don't over-do it)

ZpibooOP•12mo ago

I never used scss, and again I was just curious about it being possible. Anyway, thanks for the answers :D

ἔρως•12mo ago

the examples i gave also work in css

ZpibooOP•12mo ago

What? I thought you were saying there was a really hacky or just "bad" way to do it in scss (directly nested in #element::after), and that you just preferred to give an alternative in css xd

ἔρως•12mo ago

yes, but i didn't share that cursed horrible thing here

Gaming

Programming

Select a pseudo-element's "owner" (css nesting)