feat(curriculum): Quiz set 2 for the CSS pseudo-classes (#59782)

Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
This commit is contained in:
zxc-w
2025-04-24 21:07:41 +02:00
committed by GitHub
parent 1faac313e1
commit 061df27f1d

View File

@@ -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 wont 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`