fix(curriculum): CSS pseudo-classes quiz after audit (#58422)

Co-authored-by: Sem Bauke <sem@freecodecamp.org>

curriculum/challenges/english/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md

@@ -33,13 +33,13 @@ They are selector used to add movement effects to an element during interactions
 
 #### --answer--
 
-They are keywords added to a selector that change how an element looks or behaves when it's in a specific state.
+They are keywords added to a selector that style an element based on its state.
 
 ### --question--
 
 #### --text--
 
-Which pseudo-class applies when you hover over an element?
+Which pseudo-class applies when a pointing device is being positioned over an element?
 
 #### --distractors--
 
@@ -83,7 +83,7 @@ Which pseudo-element allows you to style the first letter of a paragraph?
 
 #### --text--
 
-Which pseudo-class changes the style of an element when you click on it?
+Which pseudo-class changes the style of an element while it is being clicked?
 
 #### --distractors--
 
@@ -105,7 +105,7 @@ Which pseudo-class changes the style of an element when you click on it?
 
 #### --text--
 
-Which pseudo-class is used to select and style an element when it's focused?
+Which pseudo-class is used to style an element when it is ready to receive user input, such as a text field being clicked or tabbed into?
 
 #### --distractors--
 
@@ -127,29 +127,45 @@ Which pseudo-class is used to select and style an element when it's focused?
 
 #### --text--
 
-What does the `:hover` pseudo-class do?
+Which of the following CSS rules correctly adds the text `Note:` in front of each paragraph element with a class of `note`?
 
 #### --distractors--
 
-It styles your element when you click on it.
+```css
+.note::before {
+  content: "Note:";
+}
+```
 
 ---
 
-It makes your element float around the screen.
+```css
+p.note::after {
+  content: "Note:";
+}
+```
 
 ---
 
-It hides elements on click.
+```css
+p::before {
+  content: "Note:";
+}
+```
 
 #### --answer--
 
-It styles an element when you hover over it.
+```css
+p.note::before {
+  content: "Note:";
+}
+```
 
 ### --question--
 
 #### --text--
 
-Which pseudo-class is used for an input field that is checked?
+Which pseudo-class applies to an input field when it is selected or toggled on?
 
 #### --distractors--
 
@@ -209,7 +225,7 @@ li:last-child {
 
 #### --text--
 
-Which pseudo-class applies when an input field is optional?
+Which pseudo-class targets input fields that are not required to fill out?
 
 #### --distractors--
 
@@ -253,7 +269,7 @@ It styles elements that are not available for user interaction.
 
 #### --text--
 
-Which pseudo-class is triggered when a form input is valid?
+Which pseudo-class applies when a form input meets its validation criteria?
 
 #### --distractors--
 
@@ -283,7 +299,7 @@ Which one of these is not a location pseudo-class?
 
 ---
 
-`:scope`
+`:any-link`
 
 ---
 
@@ -335,23 +351,41 @@ li:nth-child(3) {
 
 #### --text--
 
-Which pseudo-class is used for the current active link?
+Which elements will have a `color` of `blue` with the following CSS?
+
+```css
+p:is(.blue, .highlight) {
+  color: blue;
+}
+```
 
 #### --distractors--
 
-`:focus`
+```html
+<p class="class">Paragraph 1</p>
+<p class="highlight">Paragraph 2</p>
+```
 
 ---
 
-`:hover`
+```html
+<div class="blue">Paragraph 1</div>
+<div class="highlight">Paragraph 2</div>
+```
 
 ---
 
-`:visited`
+```html
+<p>Paragraph 1</p>
+<span class="highlight">Paragraph 2</span>
+```
 
 #### --answer--
 
-`:active`
+```html
+<p class="blue">Paragraph 1</p>
+<p class="highlight">Paragraph 2</p>
+```
 
 ### --question--
 
@@ -379,23 +413,29 @@ It selects elements that do not match a given selector.
 
 #### --text--
 
-What does the `:nth-child(4)` pseudo-class do?
+What does the following CSS rule do?
+
+```css
+p:first-of-type {
+  font-style: italic;
+}
+```
 
 #### --distractors--
 
-It selects the last child.
+It selects the first `p` element in the document.
 
 ---
 
-It selects all children.
+It selects all `p` elements in the document.
 
 ---
 
-It styles odd children.
+It selects the first child of every `p` element.
 
 #### --answer--
 
-It selects the fourth child.
+It selects the first `p` element within a parent container.
 
 ### --question--
 
@@ -405,19 +445,19 @@ What does the `:last-of-type` pseudo class do?
 
 #### --distractors--
 
-It selects the first child element.
+It selects the first child element of a specific type within its parent.
 
 ---
 
-It selects the middle element.
+It selects the middle child element of a specific type within its parent.
 
 ---
 
-It selects every element in a group.
+It selects every child element of a specific type within its parent.
 
 #### --answer--
 
-It selects the last sibling element.
+It selects the last child element of a specific type within its parent.
 
 ### --question--
 
@@ -453,7 +493,7 @@ Which one of these is a functional pseudo-class?
 
 ---
 
-`:last-of-type`
+`:match()`
 
 ---
 
@@ -483,5 +523,4 @@ Which one of these is not a functional pseudo-class?
 
 #### --answer--
 
-`::before`
-
+`:contains()`

curriculum/challenges/english/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md

@@ -38,7 +38,8 @@ Review the concepts below to prepare for the upcoming quiz.
 - **`:link` Pseudo-class**: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them.
 - **`:local-link` Pseudo-class**: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones.
 - **`:visited` Pseudo-class**: This pseudo-class targets a link the user has visited. 
-- **`:target` Pseudo-class**: This pseudo-class is used to apply styles to an element that is the target of a URL fragment 
+- **`:target` Pseudo-class**: This pseudo-class is used to apply styles to an element that is the target of a URL fragment.
+- **`:target-within` Pseudo-class**: This pseudo-class applies styles to an element when it or one of its descendants is the target of a URL fragment.
 
 ## Tree-structural Pseudo-classes
 
@@ -48,14 +49,13 @@ Review the concepts below to prepare for the upcoming quiz.
 - **`:nth-child(n)` Pseudo-class**: This pseudo-class allows you to select elements based on their position within a parent.
 - **`:nth-last-child(n)` Pseudo-class**: This pseudo-class enables you to select elements by counting from the end.
 - **`:first-child` Pseudo-class**: This pseudo-class selects the first element in a parent element or the document.
-- **`:last-child` Pseudo-class**: This pseudo-class selects the last element in a parent element or the document
-- **`:only-child` Pseudo-class**: This pseudo-class selects the only element in a parent element or the document
+- **`:last-child` Pseudo-class**: This pseudo-class selects the last element in a parent element or the document.
+- **`:only-child` Pseudo-class**: This pseudo-class selects the only element in a parent element or the document.
 - **`:first-of-type` Pseudo-class**: This pseudo-class selects the first occurrence of a specific element type within its parent.
 - **`:last-of-type` Pseudo-class**: This pseudo-class selects the last occurrence of a specific element type within its parent.
 - **`:nth-of-type(n)` Pseudo-class**: This pseudo-class allows you to select a specific element within its parent based on its position among siblings of the same type.
 - **`:only-of-type` Pseudo-class**: This pseudo-class selects an element if it's the only one of its type within its parent. 
 
-
 ## Functional Pseudo-classes
 
 - **Functional Pseudo-classes**: Functional pseudo-classes allow you to select elements based on more complex conditions or relationships. Unlike regular pseudo-classes which target elements based on a state (for example, :hover, :focus), functional pseudo-classes accept arguments.
@@ -91,6 +91,14 @@ article:has(h2) {
 }
 ```
 
+- **`:not()` Pseudo-class**: This pseudo-class is used to select elements that do not match the provided selector.
+
+```css
+p:not(.example) {
+  color: blue;
+}
+```
+
 ## Pseudo-elements 
 
 - **`::before` Pseudo-element**: This pseudo-element uses the `content` property to insert cosmetic content like icons just before the element.