0

I need to select only those elements that have pseudo-elements ::before & ::after (not necessarily at the same time). Also, I need to apply styles to these pseudo-elements.

I thought this solution would work:

*:has(::before, ::after) {
  content: '';
  /* Something else ... */
}
Joanna
  • 29
  • 5
  • All elements have pseudo elements - they're just not styled. – kelsny Dec 12 '22 at 21:33
  • 1
    related: https://stackoverflow.com/a/58001812/8620333 – Temani Afif Dec 12 '22 at 22:16
  • Are you trying to apply the same styles to all before and after pseudo elements? If so is there a reason for not just doing: *::before, *::after { } This will catch any before and after pseudo elements that have content property settings. Or are you trying to remove content property settings, in which case you need JavaScript. – A Haworth Dec 13 '22 at 04:06
  • @AHaworth I am trying to get rid of the need to specify `content: '';` in each pseudo-element explicitly. I would love to reset this somewhere in my project. Unfortunately, when I add `content: '';` for `*::before, *::after`, it puts these elements on the page and breaks everything. The point is that if I need to change the content property, a simple redefinition takes its place. – Joanna Dec 13 '22 at 11:08
  • There is a differene between content: '' and content: none so I don't think it makes sense to try to set content for every single element. – A Haworth Dec 13 '22 at 11:59
  • @AHaworth nobody has written anything about `content: none`. It has nothing to do with the question. The point is to take all elements that have a pseudo-element, whether it is `::before` or `::after`, and set `content: ''` for this element. It should be base reset that allow me to subsequently avoid writing `content: ''` in each pseudo-element created in the entire application. It's a little bit annoying to repeat the same thing everywhere, especially taking into account that the `content` property has another value very rarely. – Joanna Dec 13 '22 at 12:58
  • I’m afraid you will have to repeat it when you want to style a pseudo element. Setting it globally overwrites the default. – A Haworth Dec 13 '22 at 14:13
  • @AHaworth dankjewel! – Joanna Dec 13 '22 at 18:18

0 Answers0