Document that class and ID selector values must be valid CSS identifiers

wbamberg · Jul 3, 2024 · 2bbdb14 · 2bbdb14
1 parent 4f7063e
commit 2bbdb14
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 22 deletions.
diff --git a/files/en-us/web/css/class_selectors/index.md b/files/en-us/web/css/class_selectors/index.md
@@ -33,15 +33,30 @@ 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).
+
 ## 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>
+```
+
+#### CSS
 
 ```css
 .red {
@@ -58,20 +73,23 @@ Note that this is equivalent to the following {{Cssxref("Attribute_selectors", "
 }
 ```
 
-### HTML
+#### Result
 
-```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>
-```
+{{EmbedLiveSample('Examples')}}
 
-### Result
+### Invalid class selectors
 
-{{EmbedLiveSample('Examples')}}
+Class selectors must be valid CSS identifiers.
+
+```css example-bad
+.item?one {
+  background-color: green;
+}
+
+.123item {
+  background-color: green;
+}
+```
 
 ## Specifications
 

diff --git a/files/en-us/web/css/id_selectors/index.md b/files/en-us/web/css/id_selectors/index.md
@@ -22,32 +22,50 @@ 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).
+
 ## Examples
 
-### CSS
+### Valid ID selectors
+
+#### HTML
+
+```html
+<div id="identified">This div has a special ID on it!</div>
+<div>This is just a regular div.</div>
+```
+
+#### CSS
 
 ```css
 #identified {
   background-color: skyblue;
 }
 ```
 
-### HTML
+#### Result
 
-```html
-<div id="identified">This div has a special ID on it!</div>
-<div>This is just a regular div.</div>
-```
+{{EmbedLiveSample("Examples", '100%', 50)}}
 
-### Result
+### Invalid ID selectors
 
-{{EmbedLiveSample("Examples", '100%', 50)}}
+ID selectors must be valid CSS identifiers.
+
+```css example-bad
+#item?one {
+  background-color: green;
+}
+
+#123item {
+  background-color: green;
+}
+```
 
 ## Specifications