From 5eb5b99e4cab0b673acacce856cfb9550ce3a516 Mon Sep 17 00:00:00 2001 From: Tom <20648924+moT01@users.noreply.github.com> Date: Fri, 31 Jan 2025 02:03:13 -0600 Subject: [PATCH] fix(curriculum): CSS pseudo-classes quiz after audit (#58422) Co-authored-by: Sem Bauke --- .../66ed9002f45ce3ece4053eb6.md | 99 +++++++++++++------ .../671a907bad4538752765f2ff.md | 16 ++- 2 files changed, 81 insertions(+), 34 deletions(-) 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 3f797ae969c..d4d8054993a 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 @@ -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 +

Paragraph 1

+

Paragraph 2

+``` --- -`:hover` +```html +
Paragraph 1
+
Paragraph 2
+``` --- -`:visited` +```html +

Paragraph 1

+Paragraph 2 +``` #### --answer-- -`:active` +```html +

Paragraph 1

+

Paragraph 2

+``` ### --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()` diff --git a/curriculum/challenges/english/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md b/curriculum/challenges/english/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md index 7e5fd285126..165ea5ab764 100644 --- a/curriculum/challenges/english/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md +++ b/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.