[selectors] sibling and ::after selector in one

[Nadya678]

HTML:

<form>
<input type="text" />
</form>

Styles:

form::after
{
   display:block;
   content:"Should you see me?";
   visibility:visible;
}
form input:focus + ::after 
{
   display:none;
}

Is it legal due to current specification?
Shall be visible the ::after pseudoelement after focusing the input?
The current behaviour of Cr, IE and FF is correct?

[FremyCompany]

Your selector is valid but doesn't match anything. Here is a scenario where it would:

<form>
    <input type="text" />
    <span></span>
</form>

Then it would set display:none on the ::after of the span

[Loirooriol]

You can try form:focus-within::after. But this doesn't provide fine-grained control in case there are multiple focusable elements in the form.

In the static profile there is form:has(> input:focus:last-child)::after.

[Nadya678]

Thank you for clearation but the clearation probable shall be put in documents. The form input:focus + ::after is synonim of form input:focus + *::after.

The :has is not standard. The :focus-within is good and useable candidate selector in my opinion but... has only WD status.

The code is only example code. Not real use. I only want to point what should (IMO) be cleared in CSS documentation.

[SelenIT]

IMO, the equivalence of ::after and *::after is quite clearly implied by the following text about the universal selector:

In CSS Selectors Level 3 Recommendation:

If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.

In CSS Selectors Level 4 Editor's Draft:

Unless an element is featureless, the presence of a universal selector has no effect on whether the element matches the selector.

The :has() selector is there in the current CSS Selectors Level 4 proposal, so it is still the best current candidate for becoming standard (although personally I am not a big fan of the 'static selectors profile' concept and am rather skeptical that this ever gets implemented).

[tabatkins]

Yes, pseudo-elements "imply a *" if there's no other simple selectors preceding them. So ::after and *::after are exactly equivalent. This is already in the Selectors spec.

The :has() selector is there in the current CSS Selectors Level 4 proposal, so it is still the best current candidate for becoming standard (although personally I am not a big fan of the 'static selectors profile' concept and am rather skeptical that this ever gets implemented).

Precisely because it's in the static profile, :has() is not planned to ever work in stylesheets.

[SelenIT]

And since it would be not usable in stylesheets, and JS devs would use more interoperable solutions (though probably 2-liners insteas of 1-liner) to check if a selected element has a certain element inside, browser vendors would have little interest in adding extra complexity to their CSS parsing engines for this very specific case only.

What web devs constantly ask for (and what can become a good competitive point for the browser vendors) is the ability to style things depending on the contents, even with more limitations than :has() in a dynamic profile would have in theory (something like :has-children() in the dynamic profile would be great!).