CSS Selectors: A Comprehensive Guide for Web Developers

Question 1

Which of the following is an invalid CSS selector?

Accepted Answer

div { color: red; }

Answer

.my-class

Answer

p#my-id

Answer

*

Question 2

Which selector would match an element with the class name "container" and any of its descendants?

Accepted Answer

.container *

Answer

.container:descendant

Answer

container *

Answer

* .container

Question 3

Which selector would select all elements with the attribute "data-role" set to "main"?

Accepted Answer

[data-role="main"]

Answer

main[data-role]

Answer

.data-role-main

Answer

data-role:main

Question 4

Which selector would select all elements except those with the class "ignore"?

Accepted Answer

:not(.ignore)

Answer

ignore:not

Answer

not .ignore

Answer

.ignore:not

Question 5

Which CSS selector would match elements with both the ID "header" and the class "banner"?

Accepted Answer

#header.banner

Answer

#banner.header

Answer

header.banner

Answer

.banner#header

Question 6

Which selector would select all input elements of type "text" but only within the form with the ID "search-form"?

Accepted Answer

#search-form input[type="text"]

Answer

input[type="text"] #search-form

Answer

input#search-form[type="text"]

Answer

#search-form input.text

Question 7

Which selector would match elements that are the immediate children of an element with the class "container"?

Accepted Answer

.container > *

Answer

.container *

Answer

* > .container

Answer

container > *

Question 8

Which pseudo-class would select elements that are currently being hovered over with the mouse pointer?

Accepted Answer

:hover

Answer

.hover

Answer

hover

Answer

:onhover

Question 9

Which CSS selector would select all elements that have either the class "active" or the class "selected"?

Accepted Answer

.active, .selected

Answer

.active.selected

Answer

.selected, active

Answer

active selected

Question 10

Which CSS selector targets all elements with the class "container"?

Accepted Answer

.container

Answer

container

Answer

#container

Answer

div.container

Question 11

Select the CSS selector that targets the element with the ID "header".

Accepted Answer

#header

Answer

.header

Answer

header

Question 12

Which CSS selector targets all elements that are direct children of an element with the class "main"?

Accepted Answer

.main > *

Answer

* > .main

Answer

.main *

Answer

.main > div

Question 13

Select the CSS selector that targets all elements that are descendants of the element with the ID "content".

Accepted Answer

#content *

Answer

.content *

Answer

content *

Answer

#content > *

Question 14

Which CSS selector targets all elements that have the attribute "data-role" set to "navigation"?

Accepted Answer

[data-role="navigation"]

Answer

[data-role=navigation]

Answer

data-role="navigation"

Answer

data-role.navigation

Question 15

Which CSS selector targets all elements that have both the class "active" and the class "visible"?

Accepted Answer

.active.visible

Answer

.active .visible

Answer

.active and .visible

Answer

.active || .visible

Question 16

Which CSS selector targets all elements that are the first child of their parent?

Accepted Answer

:first-child

Answer

first

Answer

first-child

Answer

:first

Question 17

Select the CSS selector that targets all input elements of type "submit".

Accepted Answer

input[type="submit"]

Answer

input:type("submit")

Answer

input type="submit"

Answer

input.submit

Question 18

Which CSS selector targets all elements of a specific type, like all 'p' (paragraph) elements?

Accepted Answer

p

Answer

.paragraph

Answer

p[class]

Answer

#paragraph

Question 19

What does the '.' character indicate in a CSS selector?

Accepted Answer

It selects elements with a specific class name.

Answer

It selects elements with a specific ID.

Answer

It selects all elements in the document.

Answer

It selects elements with a specific attribute.

Question 20

Which selector targets an element with a specific ID, like 'header'?

Accepted Answer

#header

Answer

.header

Answer

* header

Answer

header[id]

Question 21

What do the '[]' characters signify in a CSS selector?

Accepted Answer

They select elements based on an attribute and its value.

Answer

They select all elements in the document.

Answer

They select elements with a specific ID.

Answer

They select elements with a specific class.

Question 22

Which selector targets only the direct children of a specific element?

Accepted Answer

parent-element > child-element

Answer

parent-element child-element

Answer

parent-element . child-element

Answer

parent-element [child-element]

Question 23

What is the purpose of the '*' character when used as a CSS selector?

Accepted Answer

It selects all elements on the web page.

Answer

It selects elements with a specific class.

Answer

It selects elements with a specific attribute.

Answer

It selects elements with a specific ID.

Question 24

Which selector targets any descendant (direct or indirect) of a specific element?

Accepted Answer

parent-element descendant-element

Answer

parent-element [descendant-element]

Answer

descendant-element parent-element

Answer

parent-element > descendant-element

Question 25

What does the '~' character do in a CSS selector?

Accepted Answer

It selects all sibling elements after a specific element.

Answer

It selects all descendant elements of a specific element.

Answer

It selects all elements in the document.

Answer

It selects all direct children of a specific element.

Question 26

Which selector targets the immediate sibling element after a specific element?

Accepted Answer

parent-element + adjacent-element

Answer

adjacent-element parent-element

Answer

parent-element > adjacent-element

Answer

parent-element ~ adjacent-element

Question 27

What is the purpose of the ',' character when used in a CSS selector?

Accepted Answer

It combines multiple selectors, applying styles to all matching elements.

Answer

It selects all sibling elements of a specific element.

Answer

It selects all direct children of a specific element.

Answer

It selects all descendant elements of a specific element.

Question 28

Which CSS selector targets elements with a class name of "box"?

Accepted Answer

.box

Answer

box

Answer

#box

Answer

&box

Question 29

What is the purpose of the wildcard selector (*)?

Accepted Answer

Selects all elements

Answer

Selects the first element

Answer

Selects elements that do not match any other selector

Answer

Selects elements with no class or ID

Question 30

Which selector targets all direct children of elements with a class of "container"?

Accepted Answer

.container > *

Answer

> .container *

Answer

.container *

Answer

container > *

Question 31

What is the difference between the ID and class selectors?

Accepted Answer

ID selectors target specific elements, while class selectors target groups of elements

Answer

Class selectors are more specific than ID selectors

Answer

ID selectors are used for global styling, while class selectors are used for local styling

Question 32

Which attribute selector selects elements that have a "data-type" attribute with a value of "image"?

Accepted Answer

[data-type="image"]

Answer

&data-type="image"

Answer

#data-type="image"

Answer

.data-type="image"

Question 33

What is the purpose of the "not()" pseudo-class?

Accepted Answer

Excludes elements that match the specified selector

Answer

Inverts the specificity of a selector

Answer

Selects elements that do not match any other selector

Question 34

Which pseudo-class targets elements that are the first child of their parent?

Accepted Answer

:first-child

Answer

:first

Answer

:child

Answer

:parent

Question 35

What is the difference between specificity and precedence?

Accepted Answer

Specificity determines which style rule is applied, while precedence determines the order in which rules are applied

Answer

Precedence determines which style rule is applied, while specificity determines the order in which rules are applied

Question 36

Which of the following is NOT a valid CSS selector?

Accepted Answer

%invalid-selector

Answer

#valid-selector

Answer

valid-selector

Answer

.valid-selector

Question 37

What is the purpose of the "nth-of-type()" pseudo-class?

Accepted Answer

Selects an element that is the nth occurrence of its type among its siblings

Answer

Selects an element that is the nth child of its parent

Answer

Selects an element that is the nth element on the page