ASP.NET Core 6 bundler choking on CSS a:has with child class

Question

I am using ASP.NET Core 6 with legacy CSS code.

I added a new CSS block as follows:

.myclass a:has(i.other-class) {
  ...
}

The bundler is failing with error

Bundler & Minifier error 0: Expected identifier, found '.'.

Bundler & Minifier error 0: Expected comma or open brace, found ')'

I tried with many combinations as follows:

.myclass a:has(> i.other-class)  

.myclass:has(a):has(> i.other-class)

all failed

Answer 1

Look at your code for some options consider:

• .myclass a:has(> i.other-class) {
• or perhaps .myclass:has(a):has(> i.other-class) {
• maybe just take out the i so it uses the class i.e. .myclass a:has(.other-class) {

ON my STUMP: I don't really like CSS based on element names anyway since a <span> and an <i> can often be used interchangeably (and the span actually reflects a case where it should be used but was "hijacked" just because i is smaller/less text. (my IMHO) part - now I can jump off my stump speech.