CSS Questions & Answers – Selectors

CSS Multiple Choice Questions & Answers (MCQs) focuses on “Selectors”.

Q 1. What type of selector is used in this case?

p {line-height: 150%;}

A. element Selectors
B. class Selectors
C. id Selectors
D. none of the mentioned

Show Answer

Answer:-A. element Selectors

Explanation

These selectors are called element selectors and are simply used as follows: element-name { /* properties */ }

Q 2. By applying an ___________ a style can be applied to just a single tag.
A. class rule
B. element rule
C. id rule
D. none of the mentioned

Show Answer

Answer:-C. id rule

Explanation

By applying an id rule, a style can be applied to just a single tag. For example, if we name a tag with a unique id attribute as follows Affected Text

Q 3. The _____________ attribute is used to define the name(s) of the class(es) to which a particular tag belongs.
A. id
B. element
C. class
D. none of the mentioned

Show Answer

Answer:-C. class

Q 4. What will be the output of below mentioned code snippet?

p strong {background-color: yellow;}

A. Strong have yellow background
B. Both p and strong have yellow background
C. Strong element within a p element have a yellow background
D. None of the mentioned

Show Answer

Answer:-C. Strong element within a p element have a yellow background

Explanation

All occurrences of the strong element within a p element have a yellow background.

Q 5. A similar rule called the ____________ is specified using the plus sign (+) and is used to select elements that would be siblings of each other.
A. class selectors
B. attribute selectors
C. adjacent-sibling selector
D. none of the mentioned

Show Answer

Answer:-C. adjacent-sibling selector

Q 6. Which of the following selectors selects any tag with an id attribute set?

A. E#id
B. .class
C. #id
D. *

Show Answer

Answer:-C. #id

Explanation

Example:#test {color: green;} /* makes a tag with id=’test’ green */

Q 7. Which of the following selectors selects direct descendents?

A. E > F
B. E F
C. E + F
D. E ~ F

Show Answer

Answer:-A. E > F

Explanation

Example: body > p {background-color: yellow;} /* makes all p tags that have the body tag as their immediate parent have the background color yellow */

Q 8. Which of the following selectors selects siblings?

A. E.class
B. E ~ F
C. *
D. E, F, G

Show Answer

Answer:-B. E ~ F

Explanation

Example: p ~ strong {font-style: italic;} /* sets the font style to italic on all strong tags that have a p tag as a preceding sibling */

Q 9. Which of the following selectors selects the specified elements of type E with a particular class value?

A. E.class
B. E ~ F
C. *
D. E, F, G

Show Answer

Answer:-A. E.class

Explanation

Example: h1.note {text-decoration: underline;} /* underlines all h1 tags with class=’note’ */

Q 10. Which of the following selectors selects adjacent siblings?

A. E > F
B. E F
C. E + F
D. E ~ F

Show Answer

Answer:-C. E + F

Explanation

Example: h1 + p {color: red;} /* makes all p tags that are immediately preceded by an h1 tag red */