Skip to content

Commit

Permalink
Document that class and ID selector values must be valid CSS identifi…
Browse files Browse the repository at this point in the history
…ers (mdn#34601)
  • Loading branch information
wbamberg authored Jul 5, 2024
1 parent 2899a56 commit 20bdf76
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 21 deletions.
62 changes: 50 additions & 12 deletions files/en-us/web/css/class_selectors/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,38 @@ li.spacious.elegant {
.class_name { style properties }
```

Note that this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:
Note that this is equivalent to the following [attribute selector](/en-US/docs/Web/CSS/Attribute_selectors):

```css
[class~=class_name] { style properties }
```

The `class_name` value must be a valid [CSS identifier](/en-US/docs/Web/CSS/ident). HTML `class` attributes which are not valid CSS identifiers must be [escaped](/en-US/docs/Web/CSS/ident#escaping_characters) before they can be used in class selectors.

## Examples

### CSS
### Valid class selectors

#### HTML

```html
<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">
This paragraph has red text and a yellow background.
</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>
```

```html
<!-- The next two paragraphs have class attributes
that contain characters which must be escaped in CSS -->

<p class="item?one">This paragraph has a pink background.</p>
<p class="123item">This paragraph has a yellow background.</p>
```

#### CSS

```css
.red {
Expand All @@ -58,20 +81,35 @@ Note that this is equivalent to the following {{Cssxref("Attribute_selectors", "
}
```

### HTML
```css
/* In the next two rules, the class attributes must be escaped */

.item\?one {
background-color: pink;
}

```html
<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">
This paragraph has red text and a yellow background.
</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>
.\00003123item {
background-color: yellow;
}
```

### Result
#### Result

{{EmbedLiveSample('Examples', "", 300)}}

### Invalid class selectors

The class selectors in the following rules are not valid CSS identifiers, and will be ignored.

{{EmbedLiveSample('Examples')}}
```css example-bad
.item?one {
background-color: green;
}

.123item {
background-color: green;
}
```

## Specifications

Expand Down
56 changes: 47 additions & 9 deletions files/en-us/web/css/id_selectors/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,32 +22,70 @@ The CSS **ID selector** matches an element based on the value of the element's [
#id_value { style properties }
```

Note that syntactically (but not specificity-wise), this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:
Note that syntactically (but not specificity-wise), this is equivalent to the following [attribute selector](/en-US/docs/Web/CSS/Attribute_selectors):

```css
[id=id_value] { style properties }
```

The `id_value` value must be a valid [CSS identifier](/en-US/docs/Web/CSS/ident). HTML `id` attributes which are not valid CSS identifiers must be [escaped](/en-US/docs/Web/CSS/ident#escaping_characters) before they can be used in class selectors.

## Examples

### CSS
### Valid ID selectors

#### HTML

```html
<p id="blue">This paragraph has a blue background.</p>
<p>This is just a regular paragraph.</p>
```

```html
<!-- The next two paragraphs have id attributes
that contain characters which must be escaped in CSS -->

<p id="item?one">This paragraph has a pink background.</p>
<p id="123item">This paragraph has a yellow background.</p>
```

#### CSS

```css
#identified {
#blue {
background-color: skyblue;
}
```

### HTML
```css
/* In the next two rules, the id attributes must be escaped */

#item\?one {
background-color: pink;
}

```html
<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>
#\00003123item {
background-color: yellow;
}
```

### Result
#### Result

{{EmbedLiveSample("Examples", '100%', 200)}}

### Invalid ID selectors

{{EmbedLiveSample("Examples", '100%', 50)}}
The ID selectors in the following rules are not valid CSS identifiers, and will be ignored.

```css example-bad
#item?one {
background-color: green;
}

#123item {
background-color: green;
}
```

## Specifications

Expand Down

0 comments on commit 20bdf76

Please sign in to comment.