gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): change pseudo class to first-of-type (#59736)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Clarence
2025-04-17 05:57:29 +01:00
committed by GitHub
parent a227fb73f6
commit ed63d93e94
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md
+7 -6
View File
@@ -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)'));
<option value="manager">Manager</option>
</select>
<fieldset class="radio-group">
<legend>Availability:</legend>
<input type="radio" id="fullTime" name="availability" value="fullTime" checked>
@@ -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;
}