Multiple Choice Questions On CSS Selectors Part-2

This set of multiple-choice questions on CSS selector includes the collection of objective type questions on CSS1, CSS2 and CSS3 attribute selectors, pseudo-element selectors, pseudo-class selectors and hexadecimal code to represent colors in CSS.

1. A CSS3 selector ……………………. selects all elements of E that have the attribute attr that contains the given value.
A) E[attr$=value]
B) E[attr*=value]
C) E[attr~=value]
D) E[attr^=value]

2. …………………….. sets the color to green if the name of div ends with an alphabet “S”.
A) div[name$=”S”] {color:green;}
B) div[name=$”S”] {color:green;}
C) div[name^=”S”] {color:green;}
D) div[name#=”S”] {color:green;}

3. A CSS3 selector …………………… selects all elements of E that have the attribute attr that begins with the given value.
A) E[attr$=value]
B) E[attr*=value]
C) E[attr~=value]
D) E[attr^=value]

4. ……………… is the pseudo-element selector used in CSS2, which sets a style to be used immediately before the element.
A) : before
B) : : before
C) : : : before
D) before

5. The ………………… pseudo-class is used primarily to change the appearance of links when the user’s pointer is hovering over them.
A) : focus
B) : enable
C) : disable
D) : hover

6. The CSS rule …………………. would make the first <li> tag found within an unordered list tag (<ul>) pink.
A) ul li {color:pink;}
B) ul li:first {color:pink;}
C) ul li:first-child {color:pink;}
D) ul li:child(1) {color:pink;}

7. The CSS rule ………………… would make the fourth list item underlined if the list had the fourth item.
A) ul li: nth(4) {text-decoration:underline;}
B) ul li: nth-child(4) {text-decoration: underline;}
C) ul li: 4th-child {text-decoration: underline;}
D) ul li: nth-of-type(4) {text-decoration: underline;}

8. ……………… would set the background color of first <p> tag found in <div> orange.
A) div p: nth-of-type(1) {background-color: orange;}
B) div p: first-of-child {background-color: orange;}
C) div p: first-of-tag {background-color: orange;}
D) div p: first-of-type {background-color: orange;}

9. Which of the following is/are the CSS properties used in font property type.
i) font-family ii) font-variant iii) color iv) size
A) i, ii and iii only
B) ii, iii and iv only
C) i, iii and iv only
D) All i, ii, iii and iv only

10. Which of the following is/are the CSS properties used in outlines properties type.
i) outline-color ii) outline-style iii) outline-width iv) outline-size
A) i, ii and iii only
B) ii, iii and iv only
C) i, iii and iv only
D) All i, ii, iii and iv only

11. What is the hexadecimal code to represent blue color in CSS coding.
A) #FF0000
B) #FF00FF
C) #00FFFF
D) #0000FF

12. The hexadecimal code, ………………….. would specify pure red color.
A) #FF0000
B) #FF00FF
C) #00FFFF
D) #0000FF

13. A CSS3 pseudo-class selector …………………. will select an element that has no children.
A) : root
B) : empty
C) : blank
D) : nochild

14. A CSS3 pseudo-class selector ………………… will select the elements that are currently active.
A) : activated
B) : deactivated
C) : enabled
D) : disabled

15. The CSS rule …………………. will set the color to pink on the third last div element of its parent.
A) div: nth-last-of-type(3) {color: pink;}
B) div: nth-last-child(3) {color:pink;}
C) div: last-child(3) {color:pink;}
D) div: nth-child-last(3) {color: pink;}

16. The CSS rule ………………. will set the background color to red if the div element is it’s second to the last child.
A) div: nth-last-of-type(2) {background-color: red;}
B) div: nth-last-child(2) {background-color: red;}
C) div: last-child(2) {background-color: red;}
D) div: nth-child-last(2) {background-color: red;}

17. Which of the following CSS code will set the font-weight to bold on all span tags that have a div tag as a preceding sibling.
A) div>span {font-weight:bold;}
B) div+span {font-weight:bold;}
C) div~span {font-weight:bold;}
D) div==span {font-weight:bold;}

18. Which of the following CSS code will sets all ul tags that are decedents of div tags green.
A) div~ul {color:green;}
B) div>ul {color:green;}
C) div+ul {color:green;}
D) div ul {color:green;}

19. ……………….. sets the font style to italic on all strong tags that are immediately preceded by a P tag.
A) P+strong {font-style: italic;}
B) P~strong {font-style: italic;}
C) P>strong {font-style: italic;}
D) P strong {font-style: italic;}

20. A CSS2 selector ………………….. selects all elements of 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|=vlaue]

Answers

1. B) E[attr*=value]
2. A) div[name$=”S”] {color:green;}
3. D) E[attr^=value]
4. A) : before
5. D) : hover
6. C) ul li:first-child {color:pink;}
7. B) ul li: nth-child(4) {text-decoration: underline;}
8. D) div p: first-of-type {background-color: orange;}
9. A) i, ii and iii only
10. A) i, ii and iii only
11. D) #0000FF
12. A) #FF0000
13. B) : empty
14. C) : enabled
15. A) div: nth-last-of-type(3) {color: pink;}
16. B) div: nth-last-child(2) {background-color: red;}
17. C) div~span {font-weight:bold;}
18. D) div ul {color:green;}
19. A) P+strong {font-style: italic;}
20. B) E[attr~=value]