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 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-child(6n+1)

li:nth-of-type(6n)

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

Question 2/15

Which selector targets all elements with a

title

attribute that contains the word 'special'?

Select your answer

[title^="special"]

[title="special"]

[title*="special"]

[title|="special"]

Question 3/15

Which pseudo-class targets the last

input

element in a container?

Select your answer

input:end

input:last-child

input:final

input:last-of-type

Question 4/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="checked"]

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

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

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

Question 5/15

To select all odd

li

items, which CSS selector should you use?

Select your answer

li:odd

li:nth-child(odd)

li:odd-child

li:nth-of-type(odd)

Question 6/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 7/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 8/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-class

li:first-of-type

li:first-child

Question 9/15

Identify the selector to style all

section

elements containing at least one

h1

Select your answer

section h1

section h1:first-of-type

section:contains(h1)

section:has(h1)

Question 10/15

How would you target all

li

elements that are a direct child of a

nav

element?

Select your answer

nav > li

nav li

nav + li

nav:child(li)

Question 11/15

Consider a scenario where you want to select all

div

elements that have both

class1

and

class2

. Which of the following selectors should be used?

Select your answer

div.class1, div.class2

div.class1.class2

div.class1 + class2

div[class1][class2]

Question 12/15

Which CSS selector is correct for targeting an

img

element if it is the only element within its parent?

Select your answer

img:only-of-type

img:singleton

img:only-child

img:alone

Question 13/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

div.text.container p

p.text.container

.text .container

.container p.text

Question 14/15

What would be the proper CSS selector to target an

input

element only if it's currently focused?

Select your answer

input:current

input:checked

input:active

input:focus

Question 15/15

Which selector is best to apply a style to the empty

td

elements in an HTML table?

Select your answer

td:no-contents

td:blank

td:vacant

td:empty

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which selector targets all elements with a <pre><code>title</code></pre> attribute that contains the word 'special'?

Available answers

<pre><code>[title^="special"]</code></pre>

<pre><code>[title="special"]</code></pre>

<pre><code>[title*="special"]</code></pre>

<pre><code>[title|="special"]</code></pre>

The attribute selector

[title*="special"]

matches elements with 'special' anywhere in their

title

attribute.

Question 3/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:end</code></pre>

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

<pre><code>input:final</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 4/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="checked"]</code></pre>

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

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

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

Both

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

and

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

are valid selectors to achieve this targeting.

Question 5/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:nth-child(odd)</code></pre>

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

The selector

li:nth-child(odd)

selects all odd

li

elements.

Question 6/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 7/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 8/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-class</code></pre>

<pre><code>li:first-of-type</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.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

Identify the selector to style all <pre><code>section</code></pre> elements containing at least one <pre><code>h1</code></pre>.

Available answers

<pre><code>section h1</code></pre>

<pre><code>section h1:first-of-type</code></pre>

<pre><code>section:contains(h1)</code></pre>

<pre><code>section:has(h1)</code></pre>

section:has(h1)

uses the relational selector to target sections containing

h1

elements.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

How would you target all <pre><code>li</code></pre> elements that are a direct child of a <pre><code>nav</code></pre> element?

Available answers

<pre><code>nav:child(li)</code></pre>

The direct child selector

nav > li

selects

li

elements that are immediate children of a

nav

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

Consider a scenario where you want to select all <pre><code>div</code></pre> elements that have both <pre><code>class1</code></pre> and <pre><code>class2</code></pre>. Which of the following selectors should be used?

Available answers

<pre><code>div.class1, div.class2</code></pre>

<pre><code>div.class1.class2</code></pre>

<pre><code>div.class1 + class2</code></pre>

<pre><code>div[class1][class2]</code></pre>

The selector

div.class1.class2

targets

div

elements with both classes

class1

and

class2

Question 12/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:singleton</code></pre>

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

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

The

img:only-child

selector targets an

img

that is the sole child of its parent.

Question 13/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>div.text.container p</code></pre>

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

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

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

The selector

.container p.text

matches

with class

text

inside a

div

of class

container

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

What would be the proper CSS selector to target an <pre><code>input</code></pre> element only if it's currently focused?

Available answers

<pre><code>input:current</code></pre>

<pre><code>input:checked</code></pre>

<pre><code>input:active</code></pre>

<pre><code>input:focus</code></pre>

The pseudo-class

:focus

is used to apply styles when the

input

element is focused.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which selector is best to apply a style to the empty <pre><code>td</code></pre> elements in an HTML table?

Available answers

<pre><code>td:no-contents</code></pre>

<pre><code>td:blank</code></pre>

<pre><code>td:vacant</code></pre>

<pre><code>td:empty</code></pre>

td:empty

selects

td

elements that contain no children (including text, whitespace, etc.).