Why can't we declare nested pseudo-elements like below,
.a{...}
.a:before{...}
.a:before:before{...} /* This */
.a.after{...}
.a:after:after{...} /* And this */
Is there any alternate solution to this scenario?
Asked
Active
Viewed 1,252 times
2
Gibin Ealias
- 2,751
- 5
- 21
- 39
-
6**Because we can't!** ...ask the CSS Specifications team why not. They tried it ( as i recall) but the browser vendors couldn't get it to work. The alternative... *proper HTML structure* – Paulie_D Feb 09 '18 at 12:55
-
1Related if not dupe - https://stackoverflow.com/questions/11998593/can-i-have-multiple-before-pseudo-elements-for-the-same-element – Paulie_D Feb 09 '18 at 12:57
-
hahaha!! sorry but it is very funny question. – RajnishCoder Feb 09 '18 at 13:01
-
@RajnishCoder - Glad that I could make you laugh :) Now is there any alternate solution(other than the one Paulie mentioned) to this scenario? – Gibin Ealias Feb 09 '18 at 13:02
-
@GibinEalias Yes, Of course you can create nested inline elements inside `a` tag. for example `` – RajnishCoder Feb 09 '18 at 13:06
-
@GibinEalias What **specific** problem are you trying to solve since what you are trying to do is not possible with CSS. – Paulie_D Feb 09 '18 at 13:06
-
I have a popup which is in `:after` pseudo-element and I need to style a section of the text. – Gibin Ealias Feb 09 '18 at 13:11
-
2Then I'm afraid you are out of luck...but without a specific example to work from it's hard to offer suggestions. Perhaps you should ask **that** quesion instead. – Paulie_D Feb 09 '18 at 13:28