# CSS: Invalid ID selector.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-invalid-id-selector
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A CSS selector in your `style` element or `style` attribute contains an ID that doesn't follow valid CSS syntax rules.

In CSS, ID selectors must begin with a `#` followed by a valid CSS identifier. A valid CSS identifier cannot start with a digit, two hyphens, or a hyphen followed by a digit, unless the identifier is properly escaped. This error commonly occurs when your HTML element has an `id` that begins with a number (like `id="1section"`) and your CSS references it directly as `#1section`.

While HTML5 allows `id` values to start with numbers, CSS does not accept those values as-is in selectors. You have two options: rename the `id` to start with a letter or underscore, or escape the leading digit in your CSS selector using a backslash (e.g., `#\31 section`). Renaming the `id` is almost always the simpler and more maintainable approach.

## Invalid ID selector

```html
<style>
  #1section {
    color: red;
  }
</style>

<div id="1section">Hello</div>
```

## Fixed: Use a valid identifier

```html
<style>
  #section-1 {
    color: red;
  }
</style>

<div id="section-1">Hello</div>
```

If you cannot change the `id` in the HTML, escape the digit in CSS:

```html
<style>
  #\31 section {
    color: red;
  }
</style>

<div id="1section">Hello</div>
```

The `\31` is the Unicode code point for the character "1", and the space after it separates the escape sequence from the rest of the identifier. This is valid CSS but harder to read, so renaming the `id` is the preferred fix.