curriculum/challenges/english/blocks/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
What are pseudo-classes?
They are CSS rules that create additional content within an element when needed.
They are properties that adjust an element's size or layout on the page.
They are selectors used to add movement effects to an element during interactions.
They are keywords added to a selector that style an element based on its state.
Which pseudo-class applies when a pointing device is being positioned over an element?
:focus
:active
:checked
:hover
Which pseudo-element allows you to style the first letter of a paragraph?
:first-letter
:first-child
:last-of-type
::first-letter
Which pseudo-class changes the style of an element while it is being clicked?
:focus
:hover
:checked
:active
Which pseudo-class is used to style an element when it is ready to receive user input, such as a text field being clicked or tabbed into?
::focus
:active
:visited
:focus
Which of the following CSS rules correctly adds the text Note: in front of each paragraph element with a class of note?
.note::before {
content: "Note:";
}
p.note::after {
content: "Note:";
}
p::before {
content: "Note:";
}
p.note::before {
content: "Note:";
}
Which pseudo-class applies to an input field when it is selected or toggled on?
:required
:disabled
:optional
:checked
Which of the following is the correct syntax to style the last child of a list?
li:nth-child(last) {
color: blue;
}
#li:last-child {
color: blue;
}
.li:last-child() {
color: blue;
}
li:last-child {
color: blue;
}
Which pseudo-class targets input fields that are not required to fill out?
:required
:enabled
::optional
:optional
What does the :disabled pseudo-class do?
It styles checked inputs.
It styles elements being hovered over.
It selects elements that do not match a given selector.
It styles elements that are not available for user interaction.
Which pseudo-class applies when a form input meets its validation criteria?
:checked
:required
:disabled
:valid
Which one of these is not a location pseudo-class?
:visited
:any-link
:link
:current
Which of the following selects the third list item?
li:child(3) {
color: red;
}
li:last-child(3) {
color: red;
}
li:nth-child(three) {
color: red;
}
li:nth-child(3) {
color: red;
}
Which elements will have a color of blue with the following CSS?
p:is(.blue, .highlight) {
color: blue;
}
<p class="class">Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<div class="blue">Paragraph 1</div>
<div class="highlight">Paragraph 2</div>
<p>Paragraph 1</p>
<span class="highlight">Paragraph 2</span>
<p class="blue">Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
What does the :not() pseudo-class do?
It adds styles to all elements.
It selects all child elements of a parent.
It selects elements that match a given selector.
It selects elements that do not match a given selector.
What does the following CSS rule do?
p:first-of-type {
font-style: italic;
}
It selects the first p element in the document.
It selects all p elements in the document.
It selects the first child of every p element.
It selects the first p element within a parent container.
What does the :last-of-type pseudo class do?
It selects the first child element of a specific type within its parent.
It selects the middle child element of a specific type within its parent.
It selects every child element of a specific type within its parent.
It selects the last child element of a specific type within its parent.
Which pseudo-class is used to select the second item in a list?
:first-child
:required
:is()
:nth-child(2)
Which one of these is a functional pseudo-class?
:first-child
:match()
:checked
:is()
Which one of these is not a functional pseudo-class?
:has()
:not()
:where()
:contains()
Which pseudo-class is used to target form elements that are enabled?
:disabled
:active
:focus
:enabled
Which pseudo-class allows you to select elements by counting from the end?
:nth-child(n)
:last-child
:last-of-type
:nth-last-child(n)
Which of the following allows you to select elements that contain specific child elements?
:is()
:where()
:in-range
:has()
Which of the following selects elements that do not contain any content or child elements?
:only-child
:last-child
:not()
:empty
What does this CSS selector target?
input:invalid {
background-color: red;
}
All input elements.
All input elements with values inside the allowed range.
All input elements that pass validation.
All input elements that fail validation.
Which pseudo-class selects input fields whose value is automatically filled by the browser?
:visited
:valid
:where()
:autofill
Which pseudo-class selects an element if it or any of its descendants is focused?
:focus
:in-range
:only-child
:focus-within
Which pseudo class represents links that point to the same document?
:target
:visited
:link
:local-link
Which of the following styles the p element when it is the target of a URL fragment?
p:empty {
background-color: gold;
}
p:not(.targeted) {
background-color: gold;
}
p:is(.target) {
background-color: gold;
}
p:target {
background-color: gold;
}
Which pseudo-class is used when an element is the target of a URL fragment?
:focus-within
:hover
:visited
:target
What does the :only-child pseudo-class select?
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.
It selects an element that has no siblings inside its parent element.
Which pseudo-class selects an element if it's the only one of its type within its parent?
:only-child
:nth-of-type(n)
:first-of-type
:only-of-type
Which CSS rule will apply a color of yellow to the second p element in the following HTML?
<div>
<h1>Courses</h1>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
p:nth-child(2) {
color: yellow;
}
p:first-of-type {
color: yellow;
}
p:last-of-type {
color: yellow;
}
p:nth-of-type(2) {
color: yellow;
}
Which pseudo-element allows you to select the marker of list items for styling?
::before
::after
:root
::marker
Which pseudo-class allows you to target the highest-level element in the document, typically the html element?
:first-child
:in-range
:target
:root
Which CSS pseudo-class has a specificity of zero, ensuring it won’t interfere with other specific styling rules?
:is()
:not()
:focus
:where()
Which one of the following is a tree-structural pseudo-class?
:where()
:valid
:link
:root
Which CSS rule will set the background-color of the following element to red if its value is outside the specified range?
<input type="number" min="10" max="25"/>
input:in-range {
background-color: red;
}
input {
background-color: red;
}
input:valid {
background-color: red;
}
input:out-of-range {
background-color: red;
}
Which pseudo-element uses the content property to insert content after the element?
::before
::marker
::first-letter
::after
Which pseudo-class applies styles to an element if its value is within the specified range?
:out-of-range
:enabled
:checked
:in-range