CSS MCQs – Selectors and Specificity

21.) Which CSS selector targets elements that are the direct children of another element?

A) :child
B) :first-child
C) > (child combinator)
D) < (descendant combinator)

Answer: Option C

Explanation: The child combinator (>) targets elements that are direct children of another element.

22.) How can you select all elements except the last one in a list using CSS?

A) :last-child
B) :last-of-type
C) :not(:last-child)
D) :not(:last-of-type)

Answer: Option D

Explanation: The :not() pseudo-class can be used to select all elements except the last one in a list.

23.) What is the specificity of the following selector: body .container #content?

A) 110
B) 101
C) 111
D) 100

Answer: Option C

Explanation: The selector consists of one tag selector, one class selector, and one ID selector, making its specificity value 111.

24.) Which CSS selector targets elements that are the nth child of their parent?

A) :nth-child
B) :child-nth
C) :child-of
D) :nth-of-type

Answer: Option A

Explanation: The :nth-child pseudo-class targets elements that are the nth child of their parent.

25.) How can you select elements that have a specific attribute with a value starting with a certain string?

A) [attribute^=”value”]
B) [attribute*=”value”]
C) [attribute$=”value”]
D) [attribute~=”value”]

Answer: Option A

Explanation: The ^ symbol selects elements with an attribute value that starts with a specific string.

26.) What is the specificity value of the following selector: div#content .paragraph?

A) 100
B) 110
C) 101
D) 111

Answer: Option D

Explanation: The selector consists of one ID selector, one class selector, and one tag selector, making its specificity value 111.

27.) What is the specificity of the following CSS rule: #header .nav li.active?

A) 111
B) 112
C) 121
D) 1100

Answer: Option C

Explanation: The selector consists of one ID selector, two class selectors, and one tag selector, making its specificity value 121.

28.) Which selector has higher specificity: .content or div.content?

A) .content
B) div.content
C) Both have the same specificity
D) Cannot be determined

Answer: Option B

Explanation: The div.content selector has higher specificity because it contains an element selector extra.

29.) Which selector has higher specificity: #header .nav li.active or .nav li#active?

A) #header .nav li.active
B) .nav li#active
C) Both have the same specificity
D) Cannot be determined

Answer: Option A

Explanation: The first selector has higher specificity due to the presence of an additional class selector.

Pages: 1 2 3

Leave a Reply

Your email address will not be published. Required fields are marked *