Mobile menu

.mobile-menu .has-sub > a:has(i, svg, symbol) {
  display:grid;
  grid-template-columns: auto 1fr auto;
}

Please help me fix this error.

What error? That’s just a bit of CSS code. You’ll need to explain what’s going on, preferably with a full demo that explains what you want and what’s going wrong.

1 Like

Does this photo help? When I checked it on the w3c validation, I got these results, and I’m not sure about the error. Thank you very much for your answer.

I’m not too sure if you can place svg and symbol inside has(), but I wonder if the validator even recognizes has() yet. (It used to be behind the times back in the day.)

The real question is this: does the CSS do what you want it to? That’s all that really counts.

1 Like

Seems to work ok so I don’t see why not.

As you say the validator has no support for :has as yet and is far behind the current specs.

The code posted above does actually works as designed in Chrome.

Note that Firefox only has support under a flag so :has is not really fit for common usage yet without fallbacks but I don’t think it will be that long before implemented.

If it’s only used for decoration or as an improvement to the layout then it’s not so much of an issue.

1 Like

symbol threw me, as I hadn’t heard of it before, but I gather it’s used inside svg elements. :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.