From 061df27f1d71490fc07d833b76dc06ef5bd94783 Mon Sep 17 00:00:00 2001
From: zxc-w <163780208+zxc-w@users.noreply.github.com>
Date: Thu, 24 Apr 2025 21:07:41 +0200
Subject: [PATCH] feat(curriculum): Quiz set 2 for the CSS pseudo-classes
 (#59782)

Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
---
 .../66ed9002f45ce3ece4053eb6.md               | 509 ++++++++++++++++++
 1 file changed, 509 insertions(+)

diff --git a/curriculum/challenges/english/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/english/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md
index e14472e42e1..afd5919eb48 100644
--- a/curriculum/challenges/english/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md
+++ b/curriculum/challenges/english/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md
@@ -524,3 +524,512 @@ Which one of these is not a functional pseudo-class?
 #### --answer--
 
 `:contains()`
+
+## --quiz--
+
+### --question--
+
+#### --text--
+
+Which pseudo-class is used to target form elements that are enabled?
+
+#### --distractors--
+
+`:disabled`
+
+---
+
+`:active`
+
+---
+
+`:focus`
+
+#### --answer--
+
+`:enabled`
+
+### --question--
+
+#### --text--
+
+Which pseudo-class allows you to select elements by counting from the end?
+
+#### --distractors--
+
+`:nth-child(n)`
+
+---
+
+`:last-child`
+
+---
+
+`:last-of-type`
+
+#### --answer--
+
+`:nth-last-child(n)`
+
+### --question--
+
+#### --text--
+
+Which of the following allows you to select elements that contain specific child elements?
+
+#### --distractors--
+
+`:is()`
+
+---
+
+`:where()`
+
+---
+
+`:in-range`
+
+#### --answer--
+
+`:has()`
+
+### --question--
+
+#### --text--
+
+Which of the following selects elements that do not contain any content or child elements?
+
+#### --distractors--
+
+`:only-child`
+
+---
+
+`:last-child`
+
+---
+
+`:not()`
+
+#### --answer--
+
+`:empty`
+
+### --question--
+
+#### --text--
+
+What does this CSS selector target?
+
+```css
+input:invalid {
+  background-color: red;
+}
+```
+
+#### --distractors--
+
+All input elements.
+
+---
+
+All input elements with values inside the allowed range.
+
+---
+
+All input elements that pass validation.
+
+#### --answer--
+
+All input elements that fail validation.
+
+### --question--
+
+#### --text--
+
+Which pseudo-class selects input fields whose value is automatically filled by the browser?
+
+#### --distractors--
+
+`:visited`
+
+---
+
+`:valid`
+
+---
+
+`:where()`
+
+#### --answer--
+
+`:autofill`
+
+### --question--
+
+#### --text--
+
+Which pseudo-class selects an element if it or any of its descendants is focused?
+
+#### --distractors--
+
+`:focus`
+
+---
+
+`:in-range`
+
+---
+
+`:only-child`
+
+#### --answer--
+
+`:focus-within`
+
+### --question--
+
+#### --text--
+
+Which pseudo class represents links that point to the same document?
+
+#### --distractors--
+
+`:target`
+
+---
+
+`:target-within`
+
+---
+
+`:link`
+
+#### --answer--
+
+`:local-link`
+
+### --question--
+
+#### --text--
+
+Which of the following styles the `p` element when it is the target of a URL fragment?
+
+#### --distractors--
+
+```css
+p:empty {
+  background-color: gold;
+}
+```
+
+---
+
+```css
+p:not(.targeted) {
+  background-color: gold;
+}
+```
+
+---
+
+```css
+p:is(.target) {
+  background-color: gold;
+}
+```
+
+#### --answer--
+
+```css
+p:target {
+  background-color: gold;
+}
+```
+
+### --question--
+
+#### --text--
+
+Which pseudo-class selects an element when it or one of its descendants is the target of a URL fragment?
+
+#### --distractors--
+
+`:focus-within`
+
+---
+
+`:target`
+
+---
+
+`:visited`
+
+#### --answer--
+
+`:target-within`
+
+### --question--
+
+#### --text--
+
+What does the `:only-child` pseudo-class select?
+
+#### --distractors--
+
+It selects the parent element which has only one child.
+
+---
+
+It selects all child elements inside the parent element.
+
+---
+
+It selects the parent element that contains only one type of child element.
+
+#### --answer--
+
+It selects an element that has no siblings inside its parent element.
+
+### --question--
+
+#### --text--
+
+Which pseudo-class selects an element if it's the only one of its type within its parent?
+
+#### --distractors--
+
+`:only-child`
+
+---
+
+`:nth-of-type(n)`
+
+---
+
+`:first-of-type`
+
+#### --answer--
+
+`:only-of-type`
+
+### --question--
+
+#### --text--
+
+Which CSS rule will apply a `color` of `yellow` to the second `p` element in the following HTML?
+
+```html
+<div>
+  <h1>Courses</h1>
+  <p>HTML</p>
+  <p>CSS</p>
+  <p>JavaScript</p>
+</div>
+```
+
+#### --distractors--
+
+```css
+p:nth-child(2) {
+  color: yellow;
+}
+```
+
+---
+
+```css
+p:first-of-type {
+  color: yellow;
+}
+```
+
+---
+
+```css
+p:last-of-type {
+  color: yellow;
+}
+```
+
+#### --answer--
+
+```css
+p:nth-of-type(2) {
+  color: yellow;
+}
+```
+
+### --question--
+
+#### --text--
+
+Which pseudo-element allows you to select the marker of list items for styling?
+
+#### --distractors--
+
+`::before`
+
+---
+
+`::after`
+
+---
+
+`:root`
+
+#### --answer--
+
+`::marker`
+
+### --question--
+
+#### --text--
+
+Which pseudo-class allows you to target the highest-level element in the document, typically the `html` element?
+
+#### --distractors--
+
+`:first-child`
+
+---
+
+`:in-range`
+
+---
+
+`:target`
+
+#### --answer--
+
+`:root`
+
+### --question--
+
+#### --text--
+
+Which CSS pseudo-class has a specificity of zero, ensuring it won’t interfere with other specific styling rules?
+
+#### --distractors--
+
+`:is()`
+
+---
+
+`:not()`
+
+---
+
+`:focus`
+
+#### --answer--
+
+`:where()`
+
+### --question--
+
+#### --text--
+
+Which one of the following is a tree-structural pseudo-class?
+
+#### --distractors--
+
+`:where()`
+
+---
+
+`:valid`
+
+---
+
+`:link`
+
+#### --answer--
+
+`:root`
+
+### --question--
+
+#### --text--
+
+Which CSS rule will set the `background-color` of the following element to `red` if its value is outside the specified range?
+
+```html
+<input type="number" min="10" max="25"/>
+```
+
+#### --distractors--
+
+```css
+input:in-range {
+  background-color: red;
+}
+```
+
+---
+
+```css
+input {
+  background-color: red;
+}
+```
+
+---
+
+```css
+input:valid {
+  background-color: red;
+}
+```
+
+#### --answer--
+
+```css
+input:out-of-range {
+  background-color: red;
+}
+```
+
+### --question--
+
+#### --text--
+
+Which pseudo-element uses the `content` property to insert content after the element?
+
+#### --distractors--
+
+`::before`
+
+---
+
+`::marker`
+
+---
+
+`::first-letter`
+
+#### --answer--
+
+`::after`
+
+### --question--
+
+#### --text--
+
+Which pseudo-class applies styles to an element if its value is within the specified range?
+
+#### --distractors--
+
+`:out-of-range`
+
+---
+
+`:enabled`
+
+---
+
+`:checked`
+
+#### --answer--
+
+`:in-range`