mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-24 23:01:18 +08:00
feat(curriculum): Add CSS Attribute Selector Quiz (#56611)
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> Co-authored-by: Naomi <accounts+github@nhcarrigan.com> Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>
This commit is contained in:
Suryaansh Chawla
co-authored by
Ilenia
Naomi
Krzysztof G.
Ilenia
Naomi
Krzysztof G.
parent
420667088d
commit
139af75aa3
+268
-100
@@ -17,439 +17,607 @@ Answer all of the questions below correctly to pass the quiz.
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which selector would target all `option` elements where the value attribute starts with `"A"`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
option[value$="A"] { font-size: 14px; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
option[value*="A"] { font-size: 14px; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
option[value~="A"] { font-size: 14px; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
option[value^="A"] { font-size: 14px; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which of the following will not match this CSS rule?
|
||||
|
||||
```html
|
||||
<style>
|
||||
[title~="flower"] {
|
||||
border: 5px solid yellow;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```html
|
||||
<img src="img1.jpg" title="klematis flower" width="150" height="113">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```html
|
||||
<img src="img2.jpg" title="flower" width="150" height="113">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```html
|
||||
<img src="img2.jpg" title="FLOWERS of flower" width="150" height="113">
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```html
|
||||
<img src="img2.jpg" title="flowers" width="150" height="113">
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which selector will target all elements with a `lang` attribute starting with `"fr"`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
[lang*="fr"] { color: blue; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
[lang="fr"] { color: blue; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
[lang~="fr"] { color: blue; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
[lang^="fr"] { color: blue; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How would you style all `a` elements where the `title` attribute starts with `"Read"`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
a[title$="Read"] { color: blue; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
a[title~="Read"] { color: blue; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
a[title*="Read"] { color: blue; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
a[title^="Read"] { color: blue; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How would you target all `input` elements with an `id` attribute that ends with `"field"`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
input[id^="field"] { border-color: red; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
input[id*="field"] { border-color: red; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
input[id~="field"] { border-color: red; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
input[id$="field"] { border-color: red; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which selector targets all elements with a `lang` attribute set to `"en-US"`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
[lang*="en"] { color: black; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
[lang$="US"] { color: black; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
[lang~="en"] { color: black; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
[lang="en-US"] { color: black; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which selector targets `a` elements where the href attribute contains `"https"`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
a[href^="https"] { text-decoration: none; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
a[href~="https"] { text-decoration: none; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
a[href$="https"] { text-decoration: none; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
a[href*="https"] { text-decoration: none; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How would you target all elements with a lang attribute that starts with `"es"` but not `"es-MX"`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
[lang*="es"]:not([lang="es-MX"]) { color: red; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
[lang~="es"]:not([lang="es-MX"]) { color: red; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
[lang$="es"]:not([lang="es-MX"]) { color: red; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
[lang^="es"]:not([lang="es-MX"]) { color: red; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
You want to style the `img` elements only if their `alt` attribute does not contain the word `"thumbnail"`. Which selector would achieve this?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
img[alt$="thumbnail"] { border: 1px solid red; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
img[alt^="thumbnail"] { border: 1px solid red; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
img[alt*="thumbnail"] { border: 1px solid red; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
img:not([alt*="thumbnail"]) { border: 1px solid red; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
You're implementing an accessibility feature where `button` elements with a `data-tooltip` attribute should show a dotted underline. However, you want to exclude `button` elements where `data-tooltip` is exactly `"off"`. How would you write the selector?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
button[data-tooltip="off"] { text-decoration: none; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
button[data-tooltip*="off"] { text-decoration: underline dotted; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
button[data-tooltip$="off"] { text-decoration: underline dotted; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
button[data-tooltip]:not([data-tooltip="off"]) { text-decoration: underline dotted; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
You need to style all links (`a`) that point to image files by selecting `href` attributes ending with `.jpg`, `.png`, or `.gif`. Which selector works best?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
a[href*=".jpg"], a[href*=".png"], a[href*=".gif"] { border-bottom: 2px solid green; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
a[href$=".jpg"], a[href~=".png"], a[href^=".gif"] { border-bottom: 2px solid green; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
a[href*="image"] { border-bottom: 2px solid green; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
a[href$=".jpg"], a[href$=".png"], a[href$=".gif"] { border-bottom: 2px solid green; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How would you target `section` elements that have a `data-theme` attribute containing the word `"dark"` but exclude those where it ends with `"-light"`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
section[data-theme="dark"]:not([data-theme$="-light"]) { background-color: black; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
section[data-theme*="dark"]:not([data-theme*="-light"]) { background-color: black; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
section[data-theme^="dark"]:not([data-theme$="-light"]) { background-color: black; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
section[data-theme*="dark"]:not([data-theme$="-light"]) { background-color: black; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
You want to style ordered lists (`ol`) where the `type` attribute is set to `"i"` (for Roman numerals). Which of the following selectors would you use?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
ol[type$="i"] { color: darkgreen; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
ol[type*="i"] { color: darkgreen; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
ol[type^="i"] { color: darkgreen; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
ol[type="i"] { color: darkgreen; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
You want to create a highlight effect for all external links (links that point to another domain) by checking for `href` attributes that do not start with your domain (`"freecodecamp.org"`). How would you do this?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
a[href^="https://freecodecamp.org"] { color: inherit; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
a[href$="freecodecamp.org"] { color: inherit; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
a[href*="freecodecamp.org"] { color: inherit; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
a:not([href^="https://freecodecamp.org"]) { color: orange; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
You need to select ordered lists (`ol`) that use the `type="1"` (for numerical listing). Which of the following selectors is correct?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
ol[type*="1"] { font-weight: bold; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
ol[type$="1"] { font-weight: bold; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
ol[type~="1"] { font-weight: bold; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
ol[type="1"] { font-weight: bold; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Suppose, on freeCodeCamp’s forum, each discussion has a `data-status` attribute that could be `"open"` or `"closed"`. You want to highlight all open discussions. How would you select these discussions?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
div[data-status$="open"] { border: 2px solid green; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
div[data-status^="open"] { border: 2px solid green; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
div[data-status*="open"] { border: 2px solid green; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
div[data-status="open"] { border: 2px solid green; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
You want to style `textarea` elements in your form, but only those with a `maxlength` attribute. Which selector would work?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
textarea[maxlength="true"] { border-color: darkred; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
textarea[maxlength^="true"] { border-color: darkred; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
textarea[maxlength*="true"] { border-color: darkred; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
textarea[maxlength] { border-color: darkred; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Suppose, on freeCodeCamp’s course catalog, each course has a `data-completion` attribute representing the percentage completed. You want to style courses where this attribute ends with `"100"`, indicating full completion. Which selector would work?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
div[data-completion="100"] { font-weight: bold; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
div[data-completion*="100"] { font-weight: bold; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
div[data-completion^="100"] { font-weight: bold; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
div[data-completion$="100"] { font-weight: bold; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
You're building a job portal and want to style job listings where the `data-role` attribute contains `"developer"`. How would you write this selector?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
div[data-role="developer"] { background-color: lightgreen; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
div[data-role^="developer"] { background-color: lightgreen; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
div[data-role$="developer"] { background-color: lightgreen; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
div[data-role*="developer"] { background-color: lightgreen; }
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
You want to style lists that have a type attribute with a value ending in `"square"`, indicating they use square bullets. Which selector would you use?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```css
|
||||
ul[type*="square"] { list-style-type: square; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```css
|
||||
ul[type="square"] { list-style-type: square; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```css
|
||||
ul[type~="square"] { list-style-type: square; }
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```css
|
||||
ul[type$="square"] { list-style-type: square; }
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user