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 +
HTML
+CSS
+JavaScript
+