HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 51

April 23, 2025 John Howard

Multiple choice questions and answers (MCQs) on HTML/CSS to prepare for exams, tests, and certifications. These questions are taken from a real written exam and some parts are taken from an interview. So you will find questions on basic techniques such as tags, web standards, CSS selector, objects, and more. This quiz will easily prepare anyone to pass their online test.

1. You want to target all <li> elements in a list, but only those whose index is a multiple of 4 (4th, 8th, 12th, etc.). Which CSS selector would you use?

A li:nth-child(4n)

B li:nth-of-type(4)

C li:nth-child(4)

D li:nth-of-type(4n)

The selector li:nth-child(4n) selects all <li> elements that occupy a position that is a multiple of 4 in the list. The 4n means that the element is at index 4, 8, 12, etc., in the child structure.

2. You want to target all <input> elements that are of type text and have a `readonly` attribute. Which CSS selector would you use?

A input[type="text"]:readonly

B input[type="text"]:disabled

C input[readonly][type="text"]

D input[type="text"]:checked

The selector input[readonly][type="text"] targets all <input> elements that have both a readonly attribute and a type="text" attribute. This selector specifically targets text fields that are in read-only mode.

3. You want to apply a style to all <li> elements that are the first 5 elements in a list. Which CSS selector would you use?

A li:nth-child(-n+5)

B li:nth-child(5n)

C li:first-of-type(5)

D li:nth-of-type(5)

The selector li:nth-child(-n+5) selects the first 5 <li> elements in the list. The expression -n+5 targets elements located in positions 1 through 5.

4. You want to target all <input> elements that have a data-id attribute with a value greater than 10. Which CSS selector would you use?

A input[data-id="10"]

B input[data-id^="10"]

C input[data-id|="10"]

D input[data-id]

The selector input[data-id] targets all <input> elements with the data-id attribute, regardless of its value. However, to specifically target values greater than 10, you would need to use JavaScript, as CSS cannot numerically compare attribute values this way.

5. You have a to-do list in a <ul>, and you want to apply a style to each <li> element immediately followed by another <li> element with the class `.completed`. Which CSS selector would you use?

A li + li.completed

B li:has(+ li.completed)

C li ~ li.completed

D li.completed + li

The selector li + li.completed applies a style to a <li> element that is immediately followed by another <li> with the class .completed. The + is an immediate sibling selector, meaning it only targets the second <li> if it immediately follows the first.

6. You want to apply a style only to <h3> elements that are placed before the last <p> element in a container. Which CSS selector would you use?

A h3 ~ p:last-of-type

B h3:nth-last-child(n)

C h3:nth-child(-n+last-of-type)

D h3 ~ p:first-child

The selector h3 ~ p:last-of-type targets all <h3> elements that are followed by a <p> element which is the last of its type in the parent. This general sibling selector (~) allows you to target elements that precede a specific <p>.

7. On a form page, you want to apply a style to all <input> fields except those with the `type="password"` attribute. Which CSS selector would you use?

A input:not(type="password")

B input:not([type="password"])

C input:not(password)

D input:not([type="password"]) :focus

The selector input:not([type="password"]) applies a style to all <input> elements except those with the type="password" attribute. The :not() pseudo-class excludes elements based on a specific condition.

8. On a web page, you have several <div> elements that both have the class `.box` and the attribute `data-active="true"`. Which CSS selector would you use to target these elements?

A .box[data-active="true"]

B .box[active="true"]

C div.box[data-active="true"]

D .box[data-active="false"]

The selector .box[data-active="true"] targets all <div> elements that have both the class .box and the data-active="true" attribute. Both class and attribute conditions must be satisfied.

9. You want to apply a style only to <span> elements that contain the text “Urgent”. Which CSS selector would you use?

A span:contains("Urgent")

B span[innerHTML="Urgent"]

C span:has("Urgent")

D span:contains("Urgent")

Although the selector span:contains("Urgent") is not native to pure CSS, it can be used in some tools or frameworks like jQuery. In pure CSS, it is not possible to target an element based on its text content. However, with JavaScript or jQuery, this goal can be achieved using the contains method.

10. You want to apply a style to all <a> elements except those with the class `.disabled`. Which CSS selector would you use?

A a:not(:disabled)

B a.disabled

C a:not(.disabled)

D a:not[.disabled]

The selector a:not(.disabled) applies a style to all <a> elements, except those that have the class .disabled. The :not() is used to exclude elements of a certain type or class.

1. You want to target all <li> elements in a list, but only those whose index is a multiple of 4 (4th, 8th, 12th, etc.). Which CSS selector would you use?

2. You want to target all <input> elements that are of type text and have a readonly attribute. Which CSS selector would you use?

3. You want to apply a style to all <li> elements that are the first 5 elements in a list. Which CSS selector would you use?

4. You want to target all <input> elements that have a data-id attribute with a value greater than 10. Which CSS selector would you use?

5. You have a to-do list in a <ul>, and you want to apply a style to each <li> element immediately followed by another <li> element with the class .completed. Which CSS selector would you use?

6. You want to apply a style only to <h3> elements that are placed before the last <p> element in a container. Which CSS selector would you use?

7. On a form page, you want to apply a style to all <input> fields except those with the type="password" attribute. Which CSS selector would you use?

8. On a web page, you have several <div> elements that both have the class .box and the attribute data-active="true". Which CSS selector would you use to target these elements?

9. You want to apply a style only to <span> elements that contain the text “Urgent”. Which CSS selector would you use?

10. You want to apply a style to all <a> elements except those with the class .disabled. Which CSS selector would you use?

You May Also Like

HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 14

HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 49

HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 38

Leave a Reply Cancel reply

2. You want to target all <input> elements that are of type text and have a `readonly` attribute. Which CSS selector would you use?

5. You have a to-do list in a <ul>, and you want to apply a style to each <li> element immediately followed by another <li> element with the class `.completed`. Which CSS selector would you use?

7. On a form page, you want to apply a style to all <input> fields except those with the `type="password"` attribute. Which CSS selector would you use?

8. On a web page, you have several <div> elements that both have the class `.box` and the attribute `data-active="true"`. Which CSS selector would you use to target these elements?

10. You want to apply a style to all <a> elements except those with the class `.disabled`. Which CSS selector would you use?