From ed63d93e94631667c2df8e097fed19a41fb50106 Mon Sep 17 00:00:00 2001 From: Clarence Date: Thu, 17 Apr 2025 05:57:29 +0100 Subject: [PATCH] fix(curriculum): change pseudo class to first-of-type (#59736) Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> --- .../66faac4139dbbd5dd632c860.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md b/curriculum/challenges/english/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md index a721609bbe1..cc92a91639c 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md +++ b/curriculum/challenges/english/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md @@ -27,9 +27,9 @@ demoType: onClick 1. The `button` element should have a `:hover` pseudo-class that changes the background color when hovered over. 1. Use the `:checked` pseudo-class on `.radio-group input[type="radio"]` to add a border color, background color and a box shadow when the radio button is selected. 1. Use the `:checked` pseudo-class on radio buttons to change the text color of the associated `label` when the option is selected. -1. Add an `:nth-child` pseudo-class to the `input` elements to style the first input fields differently. (e.g., rounded corners). +1. Add a `:first-of-type` pseudo-class to the `input` element to style the first input field differently. (e.g., rounded corners). -**Note:** Be sure to link your stylesheet in your HTML and apply your CSS. +**Note:** Be sure to link your stylesheet in your HTML and apply your CSS. # --hints-- @@ -138,10 +138,12 @@ els.forEach(input => { }) ``` -Add an `:nth-child` pseudo-class to the `input` elements to style the first input fields differently. +Add a `:first-of-type` pseudo-class to the `input` elements to style the first input field differently. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('input:nth-child(1)')); +const pseudo = new __helpers.CSSHelp(document).getStyle('input:first-of-type'); +assert.exists(pseudo); +assert.isNotEmpty([...pseudo]); ``` # --seed-- @@ -195,7 +197,6 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('input:nth-child(1)')); -
Availability: @@ -315,7 +316,7 @@ button:disabled { background-color: grey; } -input:nth-child(1) { +input:first-of-type { border-top-left-radius: 4px; border-top-right-radius: 4px; }