HTML Guide

CSS: Unknown pseudo-element or pseudo-class X

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>

Learn more:

Related W3C validator issues

CSS: Unknown pseudo-element or pseudo-class “::file-selector-button”.

CSS: Unknown pseudo-element or pseudo-class “::ng-deep”.

Attribute “height” not allowed on element “table” at this point.

Bad value X for attribute “media” on element “link”: Deprecated media feature “max-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:

<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">

Bad value X for attribute “media” on element “link”: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport is greater than 768px:

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="styles.css">

Bad value X for attribute “sizes” on element “img”: Bad CSS number token: Expected a minus sign or a digit but saw “a” instead at “auto,”.

The sizes attribute for an img element requires valid CSS syntax, and auto is not an acceptable value within that attribute.

The sizes attribute allows you to specify a list of media conditions and corresponding sizes for the images. Each condition determines which size of the image should be displayed at different viewport widths, ensuring responsive image delivery. The syntax for sizes should be a comma-separated list of media queries followed by a value denoting the corresponding width of the image. This width value may be in pixels (px) or as a percentage (vw, vh), but auto is not valid in this context.

Here is a breakdown of a correct sizes attribute usage:

50vw: This denotes that the image should take up 50% of the viewport’s width.
(max-width: 600px) 100vw, 50vw: When the viewport is at most 600 pixels wide, the image should occupy the full width (100vw). Otherwise, it should take 50 percent of the viewport width.

Remove “auto” from your sizes value and provide a valid, contextually correct CSS value.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Responsive Images Example</title>
</head>
<body>
  <img
    src="image.jpg"
    sizes="(max-width: 472px) 100vw, 472px"
    srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1000w"
    alt="A description of the image"
  >
</body>
</html>

In this example, if the viewport width is less than or equal to 472 pixels, the image will take up the entire width (100vw). For larger widths, the srcset specifies different image files for varying resolutions.

CSS: “align-items”: “auto” is not a “align-items” value.

The issue you’re encountering indicates that the CSS property align-items is being set to a value of auto, which is not a valid value for this property according to the CSS specification. The align-items property is used in flexbox and grid layouts to define how items are aligned along the cross axis.

Fixing the Issue:

Understand Valid Values: The valid values for the align-items property include:

/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
/* align-items does not take left and right values */
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;
align-items: anchor-center;

/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

Choose a Correct Value: Based on the desired alignment, choose one of the valid values. For instance:
- Use flex-start to align items to the start of the container.
- Use center to align items in the center.
- Use stretch to stretch items to fill the container.

Example Correction: If your original CSS was:

 .container {
   display: flex;
   align-items: auto; /* This is invalid */
 }

You could change it to:

 .container {
   display: flex;
   align-items: center; /* This is valid */
 }

Conclusion:

Replace the invalid auto value with a valid option that suits the design you aim for, making sure to test the layout after applying changes to confirm that the items align as intended.

CSS: “aspect-ratio”: X is not a “aspect-ratio” value.

The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element’s box. This means that even if the parent container or viewport size changes, the browser will adjust the element’s dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.

The box’s preferred aspect ratio is the specified ratio of width / height. If height and the preceding slash character are omitted, height defaults to 1.

Here are some examples of this property:

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

CSS: “background-color”: Lexical error at line L, column C. Encountered: ";" (59), after : "#".

This error typically occurs when there is a syntax issue in the CSS code for the background-color property in your HTML or CSS file. The error message indicates that there is an unexpected semicolon (;) after the # symbol, which is commonly used to define hexadecimal color values.

Here is a step-by-step guide to fix this issue:

Locate the Error:
- Look for the line and column in your code as specified by the validator. This is where the error is occurring.
Identify the Issue:
- Check the background-color property at that location. It’s likely that you have a semicolon directly after the # or an invalid color value.
Correct the Syntax:
- Ensure that the background-color property is followed by a valid hexadecimal color value, an RGB/RGBA value, an HSL/HSLA value, or a predefined color keyword.

Example of Error

Let’s say you have the following erroneous CSS code:

body {
    background-color: #; /* Incorrect */
}

The above code is incorrect because #; is not a valid color value.

Corrected Example

Here’s how to fix it by providing a valid hexadecimal color value:

body {
    background-color: #ffffff; /* Correct: Hexadecimal color for white */
}

Alternatively, you can also use other color formats or color keywords. Examples:

body {
    background-color: rgb(255, 255, 255); /* RGB color */
}

body {
    background-color: rgba(255, 255, 255, 1); /* RGBA color */
}

body {
    background-color: hsl(0, 0%, 100%); /* HSL color */
}

body {
    background-color: hsla(0, 0%, 100%, 1); /* HSLA color */
}

body {
    background-color: white; /* Predefined color keyword */
}

CSS: “background-color”: “X” is not a “background-color” value.

The background-color property in CSS expects a valid color value. Valid color values include keywords (such as red or blue), hexadecimal values (such as #FFFFFF), RGB values (such as rgb(255, 255, 255)), and others.

Example Fix

Invalid CSS

The following snippet is invalid because 0 is not a valid color value:

<style>
  .example {
    background-color: 0;
  }
</style>

Valid CSS

To fix it, use a valid color value. Below are examples using different types of color values:

Color Keyword

<style>
  .example {
    background-color: black;
  }
</style>

Hexadecimal Color

<style>
  .example {
    background-color: #000000;
  }
</style>

RGB Color

<style>
  .example {
    background-color: rgb(0, 0, 0);
  }
</style>

RGBA Color

<style>
  .example {
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>