QCM HTML / CSS – Partie 58

Questions pratiques pour testez vos connaissances sur le langage HTML à savoir l’utilisation du code HTML, structurer une page web en HTML, organiser les éléments d’une page Web, etc. Testez votre connaissance et travaillez sur les questions que vous trompez le plus souvent.
 
 

1. Quel sélecteur CSS permet de cibler tous les éléments <div> ayant la classe card et contenant un <p> dont la classe est description et dont le texte contient le mot « 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"; }

Réponse  

2. Quel sélecteur CSS permet de cibler tous les éléments <input> dans un formulaire ayant un identifiant feedback-form qui ont un attribut placeholder dont la valeur contient le mot « 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"] {}

Réponse  

3. Quel sélecteur CSS permet de cibler tous les éléments <span> qui sont suivis immédiatement par un élément <img> dans une section avec la classe gallery ?

A .gallery img + span {}

B .gallery span img + {}

C .gallery span + img {}

D .gallery span > img {}

Réponse  
 

4. Quel sélecteur CSS permet de cibler tous les éléments <div> dont la classe commence par « alert- » et qui sont suivis immédiatement par un élément <span> ?

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

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

C div.alert- + span {}

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

Réponse  

5. Quel sélecteur CSS permet de cibler un élément <h2> qui est précédé immédiatement d’un élément <div> avec une classe header ?

A .header + h2 {}

B div.header + h2 {}

C h2 + .header {}

D .header h2 + {}

Réponse  

6. Quel sélecteur CSS permet de cibler tous les éléments <a> dans une liste <ul> qui sont les derniers enfants d’un <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 {}

Réponse  

7. Quel sélecteur CSS permet de cibler tous les éléments <li> qui sont les enfants d’un <ul> avec l’attribut data-type égal à « 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"] {}

Réponse  
 

8. Quel sélecteur CSS permet de cibler tous les éléments <ul> qui ne contiennent aucun élément <li> ?

A ul:empty {}

B ul:has(li) {}

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

D ul:not(li) {}

Réponse  

9. Quel sélecteur CSS permet de cibler tous les éléments <p> qui sont enfants directs d’un élément <section> et ont un texte en majuscules ?

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; }

Réponse  

10. Quel sélecteur CSS permet de cibler tous les éléments <p> qui se trouvent à l’intérieur d’un élément <article> avec la classe post et qui ont une première lettre majuscule ?

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; }

Réponse