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

April 22, 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. If you want to apply a style only to the first paragraph that directly follows a div, which CSS selector would you use?

A div + p

B div ~ p

C div > p

D div p

The div + p selector targets only the first <p> element that immediately follows a <div>, meaning the first sibling <p> right after a <div>. The other options do not directly target the first sibling or immediately following elements.

2. If you want to target only the <p> elements that are direct children of a <div>, which CSS selector would you use?

A div + p

B div ~ p

C div > p

D div p

The div > p selector selects all <p> elements that are direct children of the <div>. This means the <p> must be immediately inside the <div>. The other options do not limit selection to direct children: div p selects all <p> elements inside the <div>, whether directly or indirectly.

3. What is the effect of the * selector in CSS?

A It selects all elements on the page

B It selects all elements inside a <div> element

C It selects all elements with a class

D It selects all elements with an ID

The * selector is a universal selector that selects all elements in an HTML document. It is often used to apply global styles (like resetting margins or padding for all elements).

4. Which CSS selector targets all <a> elements that have an href attribute starting with “https”?

A a[href^="https"]

B a[href$="https"]

C a[href*="https"]

D a[href="https"]

The a[href^="https"] selector uses the ^ character, which selects elements whose href attribute value starts with “https”. Other operators like $ (ends with) and * (contains) can also refine selection, but here, ^ is the correct choice.

5. Which CSS selector is used to select all odd-numbered list items?

A li:nth-child(odd)

B li:nth-child(even)

C li:nth-of-type(odd)

D li:nth-of-type(even)

The li:nth-child(odd) selector selects all <li> elements that are odd-numbered children of their parent (1st, 3rd, 5th, etc.). li:nth-child(even) selects even elements (2nd, 4th, 6th, etc.). The nth-of-type selectors work similarly but only consider the element type (here, li).

6. Which tag is used to define a horizontal line to separate sections?

A <break>

B <line>

C <hr>

D <divider>

The <hr> tag in HTML is used to insert a horizontal line (a separator) on a webpage. It is commonly used to visually divide content like sections or paragraphs without needing explicit text.

7. Which HTML tag is used to highlight a portion of text?

A <highlight>

B <mark>

C <strong>

D <em>

The <mark> tag in HTML is used to highlight text, usually to indicate it’s important or matches a search. Text inside <mark> is typically shown with a colored background (often yellow by default) to draw attention. Example:

<p>This is a sentence with a <mark>highlighted word</mark>.</p>

Result:

This is a sentence with a highlighted word.

8. Which CSS selector targets an element only when it has focus?

A :active

B :focus

C :hover

D :visited

The :focus selector targets an element that currently has focus, commonly used for form fields when a user clicks or tabs into them. The other options are incorrect because :active applies while the user clicks, :hover applies on mouse hover, and :visited applies to visited links.

9. Which CSS selector is used to group multiple selectors and apply the same style to them?

A selector1, selector2

B selector1 selector2

C selector1 > selector2

D selector1 ~ selector2

The selector selector1, selector2 allows grouping multiple selectors to apply the same set of styles. Example:

h1, h2 { color: blue; }

10. Which CSS selector is used to add content before an element’s content?

A ::after

B ::before

C ::first-letter

D ::first-line

The ::before pseudo-element allows you to add content before an element’s actual content. For example, you can use it to add a symbol before each list item. ::after adds content after, while ::first-letter and ::first-line target the first letter and first line of text respectively. See a complete example.

1. If you want to apply a style only to the first paragraph that directly follows a div, which CSS selector would you use?

2. If you want to target only the <p> elements that are direct children of a <div>, which CSS selector would you use?

3. What is the effect of the * selector in CSS?

4. Which CSS selector targets all <a> elements that have an href attribute starting with “https”?

5. Which CSS selector is used to select all odd-numbered list items?

6. Which tag is used to define a horizontal line to separate sections?

7. Which HTML tag is used to highlight a portion of text?

8. Which CSS selector targets an element only when it has focus?

9. Which CSS selector is used to group multiple selectors and apply the same style to them?

10. Which CSS selector is used to add content before an element’s content?

You May Also Like

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

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

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

Leave a Reply Cancel reply