mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-13 06:04:13 -04:00
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:
@@ -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 won’t 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`
|
||||
|
||||
Reference in New Issue
Block a user