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

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. Which CSS selector targets all <div> elements with the class card that contain a <p> with the class description and whose text includes the word “promotion”?

A div.card p.description:contains("promotion") {}

B div.card p.description {}

C div.card p.description:has(:contains("promotion")) {}

D div.card p.description { content: "promotion"; }

Answer  

2. Which CSS selector targets all <input> elements in a form with the ID feedback-form that have a placeholder attribute containing the word “Commentaire”?

A #feedback-form input[placeholder*="Commentaire"] {}

B #feedback-form input[placeholder^="Commentaire"] {}

C #feedback-form input[placeholder$="Commentaire"] {}

D #feedback-form input[placeholder="Commentaire"] {}

Answer  

3. Which CSS selector targets all <span> elements that are immediately followed by an <img> in a section with the class gallery?

A .gallery img + span {}

B .gallery span img + {}

C .gallery span + img {}

D .gallery span > img {}

Answer  
 

4. Which CSS selector targets all <div> elements whose class starts with “alert-” and are immediately followed by a <span> element?

A div[class^="alert-"] + span {}

B div[class*="alert-"] + span {}

C div.alert- + span {}

D div[class^="alert-"]:not(span) {}

Answer  

5. Which CSS selector targets an <h2> element that is immediately preceded by a <div> with the class header?

A .header + h2 {}

B div.header + h2 {}

C h2 + .header {}

D .header h2 + {}

Answer  

6. Which CSS selector targets all <a> elements in a <ul> list that are the last children of a <li>?

A ul li a:last-child {}

B ul li a:last-of-type {}

C ul li a:last-child:link {}

D ul li a:last-of-type:link {}

Answer  
 

7. Which CSS selector targets all <li> elements that are children of a <ul> with the data-type attribute equal to “main”?

A ul[data-type="main"] li {}

B ul[data-type="main"] > li {}

C ul[data-type="main"] li:first-child {}

D ul li[data-type="main"] {}

Answer  

8. Which CSS selector targets all <ul> elements that do not contain any <li> elements?

A ul:empty {}

B ul:has(li) {}

C ul:not(:has(li)) {}

D ul:not(li) {}

Answer  

9. Which CSS selector targets all <p> elements that are direct children of a <section> and have uppercase text?

A section > p { text-transform: uppercase; }

B section p { text-transform: uppercase; }

C section > p:first-child { text-transform: uppercase; }

D section p.uppercase { text-transform: uppercase; }

Answer  
 

10. Which CSS selector targets all <p> elements inside an <article> with the class post and applies uppercase to their first letter?

A .post article p:first-letter { text-transform: uppercase; }

B .post article p:first-letter {}

C .post article p::first-letter { text-transform: uppercase; }

D .post p::first-letter { text-transform: uppercase; }

Answer MCQPractice competitive and technical Multiple Choice Questions and Answers (MCQs) with simple and logical explanations to prepare for tests and interviews.Read More