Multiple Choice Questions On CSS Selectors Part-1

Here are the collections of 20 multiple choice questions on CSS selectors, that includes MCQ questions on CSS element selectors, id selectors, class selectors, contextual selectors, direct descendant selector, adjacent sibling selectors, general sibling selectors and attribute selectors.

1. In CSS selectors, if the simplest rules can be applied to all occurrences of a particular tag, such selectors are called ………………
A) id selectors
B) element selectors
C) class selectors
D) contextual selectors

2. To set a value for all elements used in HTML document ………………….. can be used.
A) # (hash)
B) * (astrik)
C) . (dot)
D) ^ (exponent)

3. Which of the following is NOT the correct way of using element selectors in CSS.
A) P{line-height:250%;}
B) #{padding:10px;}
C) *{margin:5px;}
D) h1,h2,h3{color:black;}

4. …………….. select only div element with their id contribute set to “div1”.
A) #div1{color: red;}
B) div.div1 {color: red;}
C) #div1 div {color: red;}
D) div#div1{color: red;}

5. Which of the following is/are the correct examples of implementing class selectors.
i) h2.new {background-color: green;} ii) *.new {background-color: green;}
iii) .new * {background-color: green;} iv) .new {background-color: green;}
A) i, ii and iii only
B) ii, iii and iv only
C) i, ii and iv only
D) i, ii, iii and iv only

6. ………………… are created by showing the order in which the tags must be nested for the rule to be applied.
A) id selectors
B) element selectors
C) class selectors
D) contextual selectors

7. Which of the following rule indicates all occurrences of the span element within a div element have a pink background.
A) div * span {background-color: pink;}
B) span div {background-color: pink;}
C) div span {background-color: pink;}
D) div#span {background-color:pink;}

8. ………………… would select only <a> tags that are descendants of some tag found under the body element.
A) body a {color:green;}
B) body a * {color: green;}
C) a body {color: green;}
D) body * a {color: green;}

9. …………….. form a rule to match only elements that are directly enclosed within another element.
A) child selectors
B) element selectors
C) class selectors
D) contextual selectors

10. ……………………… is specified using the plus sign(+) and is used to select elements that would be siblings of each other.
A) child selector
B) adjacent-sibling selector
C) class selector
D) contextual selector

11. ………………… is specified by (~), can be used to select elements that happen to have a particular element preceding them as a sibling directly.
A) child selector
B) adjacent-sibling selector
C) general-sibling selector
D) contextual selector

12. ………………… would select all h4 tags that have a div tag as a preceding sibling.
A) div~h4 {font-size: 20px;}
B) div+h4 {font-size: 20px;}
C) div>h4 {font-size: 20px;}
D) h4 ~ div {font-size: 20px;}

13. Which of the following CSS rule would make all h3 tags that are immediately preceded by a body tag yellow.
A) body~h3 {color: yellow;}
B) body+h3 {color: yellow;}
C) body>h3 {color: yellow;}
D) body h3 {color: yellow;}

14. Which of the following CSS code makes all strong tags that have p tag as their immediate parent have the font color pink.
A) P strong {color: pink;}
B) P>strong {color: pink;}
C) P+strong {color: pink;}
D) P~strong {color: pink;}

15. Attribute selectors, first introduced in ……………………. allow rules to match elements with particular attributes or attribute values.
A) CSS1
B) CSS2.1
C) CSS3
D) CSS2

16. …………………. would match all <input> tags that simply have value attribute.
A) input value {font-weight: bold;}
B) input < value {font-weight: bold;}
C) input ~ value {font-weight: bold;}
D) input [value] {font-weight: bold;}

17. A CSS2 selector, ……………………. selects all elements of E that have set the given attribute attr equal to the given value.
A) E[attr=value]
B) E[attr^=value]
C) E[attr|=value]
D) E[attr~=value]

18. A CSS2 selector, ………………………… selects all elements of E that have an attribute that contains a value that starts with a value that is list of hyphen-separated values.
A) E[attr~=value]
B) E[attr^=value]
C) E[attr|=value]
D) E[attr=value]

19. Which of the following CSS code sets the background color orange on all P tags that have their title attribute set to “main”.
A) P[title~=”main”] {background-color: orange;}
B) P[title=”main”] {background-color: orange;}
C) P[title^=”main”] {background-color: orange;}
D) P[title*=”main”] {background-color: orange;}

20. A CSS2 selector ……………………………., selects all elements for E that have a space separated list of values for attr where one of those values is equal to the given value.
A) E[attr~=value]
B) E[attr^=value]
C) E[attr|=value]
D) E[attr=value]

Answers

1. B) element selectors
2. B) * (astrik)
3. B) #{padding:10px;}
4. D) div#div1{color: red;}
5. C) i, ii and iv only
6. D) contextual selectors
7. C) div span {background-color: pink;}
8. D) body * a {color: green;}
9. A) child selectors
10. B) adjacent-sibling selector
11. C) general-sibling selector
12. A) div~h4 {font-size: 20px;}
13. B) body+h3 {color: yellow;}
14. B) P>strong {color: pink;}
15. D) CSS2
16. D) input [value] {font-weight: bold;}
17. A) E[attr=value]
18. C) E[attr|=value]
19. B) P[title=”main”] {background-color ..
20. A) E[attr~=value]