Add escaping example for id selectors

wbamberg · Jul 3, 2024 · 0412411 · 0412411
1 parent 92d1ab2
commit 0412411
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/files/en-us/web/css/class_selectors/index.md b/files/en-us/web/css/class_selectors/index.md
@@ -39,7 +39,7 @@ Note that this is equivalent to the following [attribute selector](/en-US/docs/W
 [class~=class_name] { style properties }
 ```
 
-The `class_name` value must be a valid [CSS identifier](/en-US/docs/Web/CSS/ident).
+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
 
@@ -99,7 +99,7 @@ that contain characters which must be escaped in CSS -->
 
 ### Invalid class selectors
 
-Class selectors must be valid CSS identifiers.
+The class selectors in the following rules are not valid CSS identifiers, and will be ignored.
 
 ```css example-bad
 .item?one {

diff --git a/files/en-us/web/css/id_selectors/index.md b/files/en-us/web/css/id_selectors/index.md
@@ -28,7 +28,7 @@ Note that syntactically (but not specificity-wise), this is equivalent to the fo
 [id=id_value] { style properties }
 ```
 
-The `id_value` value must be a valid [CSS identifier](/en-US/docs/Web/CSS/ident).
+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
 
@@ -37,25 +37,45 @@ The `id_value` value must be a valid [CSS identifier](/en-US/docs/Web/CSS/ident)
 #### HTML
 
 ```html
-<div id="identified">This div has a special ID on it!</div>
-<div>This is just a regular div.</div>
+<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;
 }
 ```
 
+```css
+/* In the next two rules, the id attributes must be escaped */
+
+#item\?one {
+  background-color: pink;
+}
+
+#\00003123item {
+  background-color: yellow;
+}
+```
+
 #### Result
 
-{{EmbedLiveSample("Examples", '100%', 50)}}
+{{EmbedLiveSample("Examples", '100%', 200)}}
 
 ### Invalid ID selectors
 
-ID selectors must be valid CSS identifiers.
+The ID selectors in the following rules are not valid CSS identifiers, and will be ignored.
 
 ```css example-bad
 #item?one {