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

How would you target all

li

elements that are a direct child of a

nav

element?

Select your answer

nav li

nav:child(li)

nav + li

nav > li

Question 2/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[id^="title-"]

h1:has-id("title-")

Question 3/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 4/15

Which selector would correctly style only the last child

li

of every

ul

Select your answer

ul > li:last-child

ul li:last-child

ul > li:last-of-type

ul li:last-of-type

Question 5/15

Consider an application requirement to select elements that are not a

span

. What's the correct selector?

Select your answer

:no-span

:without(span)

:not(span)

:except(span)

Question 6/15

What selector would apply a style to a

button

with an

aria-label

attribute containing the substring 'close'?

Select your answer

button[aria-label*="close"]

button[aria-label="close"]

button:contains("close")

button[aria-label|="close"]

Question 7/15

Identify the correct selector to target all

span

elements that are siblings of any

h1

Select your answer

h1 span

h1 ~ span

h1 > span

h1 + span

Question 8/15

How can you target the third

li

element within a

ul

using CSS?

Select your answer

ul li:nth-of-type(3)

ul li:nth(3)

ul > li:nth(3)

ul li:nth-child(3)

Question 9/15

What would be the proper CSS selector to target an

input

element only if it's currently focused?

Select your answer

input:focus

input:active

input:checked

input:current

Question 10/15

For styling purposes, assume you want to select an

input

with both

type="radio"

and a specific class name 'option'. What selector would you use?

Select your answer

input[type="radio"].option

input:radio.option

input[type.Radio][class.option]

input.option[type="radio"]

Question 11/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 12/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:only-of-type

a:only-child

a:solo-child

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

Which selector is best to apply a style to the empty

td

elements in an HTML table?

Select your answer

td:empty

td:vacant

td:no-contents

td:blank

Question 15/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]

a[href^=https]

a~href

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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 2/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[id^="title-"]</code></pre>

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

The attribute selector

h1[id^="title-"]

selects any

h1

where the

id

begins with 'title-'.

Question 3/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 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which selector would correctly style only the last child <pre><code>li</code></pre> of every <pre><code>ul</code></pre>?

Available answers

<pre><code>ul > li:last-child</code></pre>

<pre><code>ul li:last-child</code></pre>

Both

ul li:last-child

and

ul > li:last-child

are correct because they address the last child

li

ul

, regardless of its type.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

Consider an application requirement to select elements that are not a <pre><code>span</code></pre>. What's the correct selector?

Available answers

<pre><code>:without(span)</code></pre>

<pre><code>:except(span)</code></pre>

The negation pseudo-class

:not(span)

selects all elements that are not

span

elements.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

What selector would apply a style to a <pre><code>button</code></pre> with an <pre><code>aria-label</code></pre> attribute containing the substring 'close'?

Available answers

<pre><code>button[aria-label*="close"]</code></pre>

<pre><code>button[aria-label="close"]</code></pre>

<pre><code>button:contains("close")</code></pre>

<pre><code>button[aria-label|="close"]</code></pre>

button[aria-label*="close"]

selects

button

elements whose

aria-label

contains 'close'.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

Identify the correct selector to target all <pre><code>span</code></pre> elements that are siblings of any <pre><code>h1</code></pre>:

Available answers

The selector

h1 + span

selects only the first

span

sibling following each

h1

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you target the third <pre><code>li</code></pre> element within a <pre><code>ul</code></pre> using CSS?

Available answers

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

The selector

ul li:nth-child(3)

selects the third

li

element within any

ul

element.

Question 9/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:focus</code></pre>

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

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

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

The pseudo-class

:focus

is used to apply styles when the

input

element is focused.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

For styling purposes, assume you want to select an <pre><code>input</code></pre> with both <pre><code>type="radio"</code></pre> and a specific class name 'option'. What selector would you use?

Available answers

<pre><code>input[type="radio"].option</code></pre>

<pre><code>input:radio.option</code></pre>

<pre><code>input[type.Radio][class.option]</code></pre>

<pre><code>input.option[type="radio"]</code></pre>

Both

input[type="radio"].option

and

input.option[type="radio"]

correctly select the desired

input

elements.

Question 11/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 12/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:only-child</code></pre>

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

The

a:only-child

selector selects

elements that are the sole children of their parent.

Question 13/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 14/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:empty</code></pre>

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

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

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

td:empty

selects

td

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

Question 15/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.