CSS MCQs – Selectors and Specificity

11.) What is the specificity value of the selector: body p#content?

A) 010
B) 100
C) 101
D) 102

Answer: Option D

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

12.) How can you override inline styles with CSS?

A) Use the !important declaration
B) Increase the specificity of the CSS rule
C) Use inline styles with higher specificity
D) Use JavaScript to remove inline styles

Answer: Option A

Explanation: The !important declaration can override inline styles and other CSS rules if applied correctly.

13.) Which of the following is the correct CSS syntax to apply a style to an ID?

A) #myID { … }
B) .myID { … }
C) ID: myID { … }
D) [myID] { … }

Answer: Option A

Explanation: IDs are selected using the hash (#) symbol followed by the ID name.

14.) What is the purpose of the :not() pseudo-class in CSS?

A) To select elements based on their attributes
B) To exclude specific elements from being selected
C) To select elements based on their position in the DOM
D) To select elements that are the first child of their parent

Answer: Option B

Explanation: The :not() pseudo-class allows you to select elements that do not match a specific selector.

15.) Which CSS selector targets elements based on their attributes?

A) :attribute
B) [attribute]
C) .attribute
D) #attribute

Answer: Option B

Explanation: Square brackets are used to select elements based on their attributes in CSS.

16.) Which CSS selector targets only the first occurrence of an element?

A) :first-child
B) :first-of-type
C) :first-element
D) :first

Answer: Option B

Explanation: The :first-of-type pseudo-class targets the first occurrence of a specific type of element.

17.) Which CSS selector targets the last occurrence of an element?

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

Answer: Option D

Explanation: The :last-of-type pseudo-class targets the last occurrence of a specific type of element.

18.) Which CSS selector targets elements that are adjacent to each other?

A) :next
B) :adjacent
C) + (adjacent sibling combinator)
D) ~ (general sibling combinator)

Answer: Option C

Explanation: The adjacent sibling combinator (+) targets elements that are immediately adjacent to each other.

19.) How can you apply CSS styles to elements based on user interaction, such as hovering over them?

A) :hover selector
B) :active selector
C) :focus selector
D) All of the above

Answer: Option D

Explanation: CSS provides pseudo-classes like :hover, :active, and :focus to style elements based on user interaction.

20.) How do you create a group of selectors in CSS?

A) Separate selectors with commas
B) Separate selectors with spaces
C) Separate selectors with plus signs
D) Separate selectors with semicolons

Answer: Option A

Explanation: You can group selectors together by separating them with commas.

Leave a Reply

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