diff --git a/curriculum/challenges/english/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md b/curriculum/challenges/english/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md index 28703c0c5d4..c30decd71d3 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md @@ -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 + +``` #### --distractors-- -Placeholder distractor 1 +```html + +``` --- -Placeholder distractor 2 +```html + +``` --- -Placeholder distractor 3 +```html + +``` #### --answer-- -Placeholder answer +```html + +``` ### --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; } +```