HTML Guide for pseudo-element
The ::file-selector-button has not been recognized by the W3C Validator. This seems to be a bug in the W3C Validator, which has already been reported.
The ::ng-deep CSS selector is often used in an Angular Component’s CSS to override the styles of a third-party component or a child component’s styles.
This CSS selector is now deprecated.
An unknown CSS pseudo-class or pseudo-element selector is being used.
Validators report this when a selector uses a pseudo-class or pseudo-element not recognized by the chosen CSS profile (e.g., CSS Level 2.1), is misspelled, uses the wrong syntax (single vs double colon), or is behind a vendor prefix or future spec.
Use supported selectors, correct typos, use double colon for pseudo-elements like ::before and ::after, and ensure the validator profile supports modern CSS.
For experimental or vendor-prefixed selectors, consider removing them for validation, adding fallbacks, or switching the validator’s profile to a newer level.
Examples of valid pseudo-classes: :hover, :focus, :active, :focus-visible, :has() (modern). Pseudo-elements should use double colons: ::before, ::after, ::marker, ::placeholder. Vendor-prefixed selectors (e.g., ::-webkit-input-placeholder) may be flagged; provide a standards-based ::placeholder alongside them.
HTML Examples
Example showing the issue
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invalid CSS Example</title>
<style>
/* Typo and wrong colon usage */
a:hovr { color: red; }
p:before { content: "Hi "; }
/* Vendor-specific pseudo-element without standard fallback */
input::-webkit-input-placeholder { color: gray; }
/* Newer selector not supported by older profiles */
.card:has(img) { border: 1px solid #ccc; }
</style>
</head>
<body>
<a href="#">Link</a>
<p>Text</p>
<input placeholder="Your name">
</body>
</html>Fixed, validator-friendly CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fixed CSS Example</title>
<style>
/* Correct pseudo-class */
a:hover { color: red; }
/* Use double colon for pseudo-elements */
p::before { content: "Hi "; }
/* Standards-based pseudo-element with optional vendor prefix */
input::placeholder { color: gray; }
/* Optional: keep vendor prefix for browser support, may still warn */
/* input::-webkit-input-placeholder { color: gray; } */
/* If :has() causes warnings, consider a fallback or remove for validation */
/* .card:has(img) { border: 1px solid #ccc; } */
</style>
</head>
<body>
<a href="#">Link</a>
<p>Text</p>
<input placeholder="Your name">
</body>
</html>