curriculum/challenges/english/blocks/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md
To pass the quiz, you must correctly answer at least 9 of the 10 questions below.
What are CSS attribute selectors used for?
To apply styles to elements based on their tag name.
To apply styles to elements based on their class name.
To apply styles to elements based on their parent element.
To apply styles to elements based on their attributes.
Which of the following will NOT be selected by this CSS selector?
[title~="flower"] {
border: 5px solid yellow;
}
Which CSS selector matches all p elements with a lang attribute set to "fr"?
p[lang-="fr"] { color: blue; }
p[lang~="fr"] { color: blue; }
p[lang=="fr"] { color: blue; }
p[lang="fr"] { color: blue; }
Which CSS selector matches all a elements with an href attribute?
a(href) { color: green; }
a { color: green; }
a[href~=""] { color: green; }
a[href] { color: blue; }
Which CSS selector matches all ordered lists with uppercase Roman numerals?
ol[type="a"] { border-color: black; }
ol[type="A"] { border-color: black; }
ol[type="i"] { border-color: black; }
ol[type="I"] { border-color: black; }
What is the data-lang attribute commonly used for?
To specify the language of the document.
To define the character encoding of the document.
To set the language of an element based on its parent element.
To apply styles to elements based on this custom data attribute.
Which CSS selector should you use to style img elements only if their alt attribute is equal to "code"?
img[alt~="code"] { border: 1px solid red; }
img[alt=="code"] { border: 1px solid red; }
img[alt*="code"] { border: 1px solid red; }
img[alt="code"] { border: 1px solid red; }
Which CSS selector matches ordered lists with a numerical numbering type?
ol[type="i"] { color: purple; }
ol[type="I"] { color: purple; }
ol[type="a"] { color: purple; }
ol[type="1"] { color: purple; }
Which of the following CSS selectors would you use to style a elements with both href and title attributes?
a[href] a[title] { text-decoration: underline dotted; }
a[href]a[title] { text-decoration: underline dotted; }
a[href].[title] { text-decoration: underline dotted; }
a[href][title] { text-decoration: underline dotted; }
Which CSS selector would you use if you are developing a website for a restaurant and want to style all elements with the menu-item class that have a data-special attribute?
menu-item[data-special] { background-color: blue; }
#menu-item[data-special] { background-color: blue; }
[data-special="menu-item"] { background-color: blue; }
.menu-item[data-special] { background-color: blue; }