Document that class and ID selector values must be valid CSS identifi…

…ers (#34601)

files/en-us/web/css/class_selectors/index.md

@@ -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 {
@@ -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
 

files/en-us/web/css/id_selectors/index.md

@@ -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