CSS MCQs – Selectors and Specificity

CSS MCQs – Selectors and Specificity is a handy set of multiple-choice questions all about CSS. It helps both new learners and experienced developers learn more about how CSS selectors work and how specificity affects them. By going through these questions, you can understand things like class selectors, ID selectors, and how CSS decides which styles to apply. These questions are great for practicing CSS skills and getting ready for interviews. With this resource, you can get a better grasp of how CSS works and become more confident in styling your web pages.

1.) Which of the following is not a valid CSS selector?

A) #myElement
B) .myClass
C) $mySelector
D) p

Answer: Option C

Explanation: CSS selectors can include IDs (#), classes (.), and HTML elements, but they cannot include symbols like $.

2.) Which CSS selector has the highest specificity?

A) ID selectors
B) Class selectors
C) Element selectors
D) Universal selectors

Answer: Option A

Explanation: ID selectors have the highest specificity, followed by class selectors, element selectors, and universal selectors.

3.) Which of the following selectors has the least specificity?

A) ID selectors
B) Class selectors
C) Element selectors
D) Universal selectors

Answer: Option D

Explanation: Universal selectors have the least specificity, making them less powerful in overriding other selectors.

4.) Which symbol is used for the universal selector in CSS?

A) $
B) %
C) *
D) ^

Answer: Option C

Explanation: The asterisk (*) symbol is used as the universal selector, which selects all elements in the document.

5.) What does specificity determine in CSS?

A) The order of application of styles
B) The importance of styles
C) The uniqueness of a selector
D) The strength of a selector’s style rules

Answer: Option D

Explanation: Specificity determines which CSS rule is applied to an element when multiple rules could apply.

6.) Which of the following has the highest specificity?

A) #myID
B) .myClass p
C) body div p
D) .myClass #myID

Answer: Option D

Explanation: The specificity is calculated based on the number of IDs, classes, and elements in a selector. In this case, combining a class and an ID yields the highest specificity.

7.) Which CSS selector is used to select all elements with a specific class?

A) *className
B) #className
C) className
D) .className

Answer: Option D

Explanation: The dot (.) followed by the class name is used to select elements with a specific class.

8.) What is the specificity of the universal selector (*) in CSS?

A) 0
B) 1
C) 10
D) Infinite

Answer: Option A

Explanation: The universal selector has a specificity of 0, which means it is the least specific.

9.) What is the CSS specificity value of an inline style?

A) 0
B) 1
C) 10
D) 1000

Answer: Option D

Explanation: Inline styles have the highest specificity, ensuring they override other CSS rules.

10.) What is the specificity of the following selector: div.container #content p.highlight span?

A) 111
B) 121
C) 123
D) 1003

Answer: Option C

Explanation: The selector consists of three tag selectors, one ID selector, and two class selectors, making its specificity value 123.
Calculate Specificity Rule: Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element, and the inline style gets a specificity value of 1000.

Pages: 1 2 3

Leave a Reply

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