Loading... Login Loading... Register

Advanced CSS Selectors Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

Which pseudo-class targets the last

input

element in a container?

Select your answer

input:final

input:last-child

input:end

input:last-of-type

Question 2/15

What is the correct selector to select the first

div

that is not hidden using the

hidden

attribute?

Select your answer

div::-not(hidden)

div:showing

div:not([hidden])

div:visible

Question 3/15

Which selector would you use to apply styles to an

element only if it has a specific attribute

href

Select your answer

a:href

a[href^=https]

a~href

a[href]

Question 4/15

How can you use CSS to select any element with a class that ends in

-highlight

Select your answer

[class$="-highlight"]

[class~="highlight"]

[class*=highlight]

[class|-highlight]

Question 5/15

When attempting to select every

element that is the only child of its parent using CSS, which selector is correct?

Select your answer

a:parent-only

a:solo-child

a:only-of-type

a:only-child

Question 6/15

Which of the following selectors will select only

elements that are direct children of a

div

Select your answer

div p

div > p

div + p

div ~ p

Question 7/15

To select all odd

li

items, which CSS selector should you use?

Select your answer

li:nth-of-type(odd)

li:odd

li:odd-child

li:nth-child(odd)

Question 8/15

Which CSS selector would you use to select all

input

elements that are type of

checkbox

and also have the class

checked-item

Select your answer

input[type="checkbox"] & input.checked-item

input[type="checkbox"].checked-item

input[type="checked"]

input.checked-item[type="checkbox"]

Question 9/15

Which CSS selector is correct for targeting an

img

element if it is the only element within its parent?

Select your answer

img:alone

img:only-of-type

img:only-child

img:singleton

Question 10/15

If you need to style all elements with a

data-role

attribute, which of the following selectors should be applied?

Select your answer

[data-role]

data-role

*:has(data-role)

*:data(role)

Question 11/15

To select only the first

header

element within its parent, what selector should be used?

Select your answer

header:first

header:only-child

header:first-child

header:first-of-type

Question 12/15

Which selector can target the nth

li

in each set of six

li

elements starting from the first?

Select your answer

li:nth-child(6n+1)

li:nth-of-type(6n)

li:nth-child(6n-1)

li:nth-of-type(6n+1)

Question 13/15

What selector could you use to select any

h1

element that has an

id

starting with 'title-'?

Select your answer

h1#title-*

h1(*title-)

h1:has-id("title-")

h1[id^="title-"]

Question 14/15

Select the CSS selector that correctly targets the following HTML structure:

Example

. You want to target the

within the

div

with

container

class.

Select your answer

.container p.text

div.text.container p

p.text.container

.text .container

Question 15/15

How would you select every

li

element that is the first

li

child of its parent?

Select your answer

li:first

li:first-of-type

li:first-of-class

li:first-child

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which pseudo-class targets the last <pre><code>input</code></pre> element in a container?

Available answers

<pre><code>input:final</code></pre>

<pre><code>input:last-child</code></pre>

<pre><code>input:end</code></pre>

<pre><code>input:last-of-type</code></pre>

The

input:last-child

pseudo-class selects an

input

if it is the last child of its parent.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the correct selector to select the first <pre><code>div</code></pre> that is not hidden using the <pre><code>hidden</code></pre> attribute?

Available answers

<pre><code>div::-not(hidden)</code></pre>

<pre><code>div:showing</code></pre>

<pre><code>div:not([hidden])</code></pre>

<pre><code>div:visible</code></pre>

The selector

div:not([hidden])

targets

div

elements that do not have the

hidden

attribute.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which selector would you use to apply styles to an <pre><code>a</code></pre> element only if it has a specific attribute <pre><code>href</code></pre>?

Available answers

<pre><code>a[href^=https]</code></pre>

The attribute selector

a[href]

selects

elements with an

href

attribute.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you use CSS to select any element with a class that ends in <pre><code>-highlight</code></pre>?

Available answers

<pre><code>[class$="-highlight"]</code></pre>

<pre><code>[class~="highlight"]</code></pre>

<pre><code>[class*=highlight]</code></pre>

<pre><code>[class|-highlight]</code></pre>

The attribute selector

[class$="-highlight"]

matches classes ending with

-highlight

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

When attempting to select every <pre><code>a</code></pre> element that is the only child of its parent using CSS, which selector is correct?

Available answers

<pre><code>a:parent-only</code></pre>

<pre><code>a:solo-child</code></pre>

<pre><code>a:only-child</code></pre>

The

a:only-child

selector selects

elements that are the sole children of their parent.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following selectors will select only <pre><code>p</code></pre> elements that are direct children of a <pre><code>div</code></pre>?

Available answers

The selector

div > p

is the child selector that selects

elements directly inside a

div

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

To select all odd <pre><code>li</code></pre> items, which CSS selector should you use?

Available answers

<pre><code>li:odd-child</code></pre>

<pre><code>li:nth-child(odd)</code></pre>

The selector

li:nth-child(odd)

selects all odd

li

elements.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS selector would you use to select all <pre><code>input</code></pre> elements that are type of <pre><code>checkbox</code></pre> and also have the class <pre><code>checked-item</code></pre>?

Available answers

<pre><code>input[type="checkbox"] & input.checked-item</code></pre>

<pre><code>input[type="checkbox"].checked-item</code></pre>

<pre><code>input[type="checked"]</code></pre>

<pre><code>input.checked-item[type="checkbox"]</code></pre>

Both

input[type="checkbox"].checked-item

and

input.checked-item[type="checkbox"]

are valid selectors to achieve this targeting.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS selector is correct for targeting an <pre><code>img</code></pre> element if it is the only element within its parent?

Available answers

<pre><code>img:alone</code></pre>

<pre><code>img:only-child</code></pre>

<pre><code>img:singleton</code></pre>

The

img:only-child

selector targets an

img

that is the sole child of its parent.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

If you need to style all elements with a <pre><code>data-role</code></pre> attribute, which of the following selectors should be applied?

Available answers

The attribute selector

[data-role]

selects all elements that possess a

data-role

attribute.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

To select only the first <pre><code>header</code></pre> element within its parent, what selector should be used?

Available answers

<pre><code>header:first</code></pre>

<pre><code>header:only-child</code></pre>

<pre><code>header:first-child</code></pre>

<pre><code>header:first-of-type</code></pre>

Using

header:first-of-type

ensures that only the first

header

of its parent is selected.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which selector can target the nth <pre><code>li</code></pre> in each set of six <pre><code>li</code></pre> elements starting from the first?

Available answers

<pre><code>li:nth-child(6n+1)</code></pre>

<pre><code>li:nth-child(6n-1)</code></pre>

li:nth-child(6n+1)

selects every nth

li

starting from the first one in a zero-based index of 6.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

What selector could you use to select any <pre><code>h1</code></pre> element that has an <pre><code>id</code></pre> starting with 'title-'?

Available answers

<pre><code>h1#title-*</code></pre>

<pre><code>h1(*title-)</code></pre>

<pre><code>h1:has-id("title-")</code></pre>

<pre><code>h1[id^="title-"]</code></pre>

The attribute selector

h1[id^="title-"]

selects any

h1

where the

id

begins with 'title-'.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

Select the CSS selector that correctly targets the following HTML structure: <pre><code><div class="container"><p class="text">Example</p></div></code></pre>. You want to target the <pre><code>p</code></pre> within the <pre><code>div</code></pre> with <pre><code>container</code></pre> class.

Available answers

<pre><code>.container p.text</code></pre>

<pre><code>div.text.container p</code></pre>

<pre><code>p.text.container</code></pre>

<pre><code>.text .container</code></pre>

The selector

.container p.text

matches

with class

text

inside a

div

of class

container

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

How would you select every <pre><code>li</code></pre> element that is the first <pre><code>li</code></pre> child of its parent?

Available answers

<pre><code>li:first</code></pre>

<pre><code>li:first-of-type</code></pre>

<pre><code>li:first-of-class</code></pre>

<pre><code>li:first-child</code></pre>

li:first-of-type

selects every

li

element that is the first

li

among its siblings.