QCM HTML / CSS – Partie 50

mars 2, 2025mars 2, 2025 Thomas Aucun commentaire

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. Tu veux cibler tous les éléments <p> qui sont des descendants d’un élément avec la classe `.container`. Quel sélecteur CSS utiliserais-tu ?

A .container > p

B .container p

C .container :p

D p .container

Le sélecteur .container p cible tous les éléments <p> qui sont des descendants de l’élément avec la classe .container, indépendamment du nombre d’éléments entre le parent et l’élément <p>. Le > (sélecteur de l’enfant direct) ne fonctionne pas ici, car il sélectionne uniquement les enfants immédiats.

2. Tu veux cibler tous les éléments <input> de type texte (`type="text"`). Quel sélecteur CSS utiliserais-tu ?

A input[type="text"]

B input:text

C input[type=text]

D input:text(type="text")

Le sélecteur input[type="text"] cible tous les éléments <input> dont l’attribut type est égal à "text". Ce sélecteur est utile pour cibler spécifiquement les champs de texte dans un formulaire.

3. Tu souhaites appliquer un style à tous les éléments <button> qui sont actuellement activés (lorsqu’un utilisateur clique dessus et que l’état est maintenu). Quel sélecteur CSS utiliserais-tu ?

A button:focus

B button:active

C button:enabled

D button:checked

Le sélecteur button:active permet de cibler un bouton lorsqu’il est activé (en cours de clic). Cet état est actif pendant que l’utilisateur clique sur le bouton, mais il disparaît lorsque le clic est relâché. Le sélecteur :focus s’applique lorsque l’élément a le focus, ce qui n’est pas le même état que l’activation par un clic.

4. Tu veux appliquer un style à tous les éléments <ul> qui contiennent au moins un élément <li> avec la classe `.active`. Quel sélecteur CSS utiliserais-tu ?

A ul > li.active

B ul:has(li.active)

C ul:has(.active)

D ul li.active

Le sélecteur ul:has(li.active) permet de cibler un élément <ul> qui contient au moins un <li> avec la classe .active. Le sélecteur :has() est un sélecteur parent qui sélectionne les éléments ayant un descendant spécifique, mais il est encore en développement dans certains navigateurs.

5. Imaginons une page avec plusieurs cartes d’information sous forme de blocs <div>. Certaines cartes ont un fond de couleur rouge, d’autres un fond vert. Tu souhaites appliquer un style uniquement aux cartes ayant un fond rouge. Quel sélecteur CSS utiliserais-tu ?

A div[style="background-color:red"]

B div[background-color="red"]

C div:has(background-color:red)

D Il n’existe pas de sélecteur CSS pour cibler des éléments par leur couleur de fond

Le sélecteur div[style="background-color:red"] permet de cibler les éléments <div> ayant un style en ligne avec un fond rouge. Cependant, cela ne fonctionnera que si le fond est défini directement dans l’attribut style. CSS ne permet pas de cibler un élément en fonction de la couleur de fond si celle-ci est appliquée via une feuille de style externe.

6. Sur une page, tu as plusieurs sections et tu veux cibler toutes les sections après la troisième dans une liste de sections. Quel sélecteur CSS utiliserais-tu ?

A section:nth-child(3n+1)

B section:nth-of-type(n+3)

C section:nth-child(4n)

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

Le sélecteur section:nth-of-type(n+3) sélectionne tous les éléments <section> qui viennent après les trois premiers (le 4e, 5e, etc.). Ce sélecteur est très utile pour cibler des éléments à partir d’un certain index sans avoir à les compter un par un.

7. Tu veux appliquer un style à tous les éléments <div> qui ont un enfant <h2> mais seulement si cet enfant <h2> contient un certain texte. Quel sélecteur CSS utiliserais-tu ?

A div:has(h2:contains("Texte"))

B div h2:contains("Texte")

C div:has(h2)

D div > h2:contains("Texte")

Le sélecteur div:has(h2:contains("Texte")) permet de cibler tous les éléments <div> qui contiennent un enfant <h2> contenant le texte « Texte ». Le sélecteur :has() est particulièrement puissant pour cette tâche, mais il est encore en développement dans certains navigateurs. Ce sélecteur permet de sélectionner un parent basé sur son contenu enfant.

8. Tu veux cibler tous les éléments <p> qui sont des enfants non directs d’un élément <section>. Quel sélecteur CSS utiliserais-tu ?

A section > p

B section p

C section + p

D section ~ p

Le sélecteur section p cible tous les éléments <p> qui sont des descendants de l’élément <section>, peu importe le niveau d’imbrication. Ce n’est pas nécessairement un enfant direct, contrairement à l’utilisation du sélecteur >, qui cible uniquement les enfants immédiats.

9. Tu as plusieurs boutons avec la classe .btn et tu souhaites appliquer un style uniquement aux boutons qui sont actuellement survolés (hover). Quel sélecteur CSS utiliserais-tu ?

A .btn:hover

B .btn:focus

C .btn:active

D .btn:checked

Le sélecteur .btn:hover applique un style aux boutons lorsque l’utilisateur survole l’élément avec la souris. Le sélecteur :hover est un pseudo-classe qui permet de cibler les éléments lors du survol, ce qui est très courant pour les boutons et les liens.

10. Tu veux appliquer un style à tous les éléments <h3> qui sont suivis de trois éléments <p>. Quel sélecteur CSS utiliserais-tu ?

A h3 + p + p + p

B h3 ~ p + p + p

C h3 + p ~ p

D h3 + p:only-child

Le sélecteur h3 + p + p + p sélectionne tous les éléments <p> qui suivent immédiatement un <h3>, et ce, trois fois. Le + est un sélecteur de frère immédiat, ce qui signifie que le <p> doit suivre directement un autre <p>, un après l’autre, sans qu’il n’y ait d’autres éléments intercalés.

QCMs qui pourraient vous intéresser :

1. Tu veux cibler tous les éléments <p> qui sont des descendants d’un élément avec la classe .container. Quel sélecteur CSS utiliserais-tu ?

2. Tu veux cibler tous les éléments <input> de type texte (type="text"). Quel sélecteur CSS utiliserais-tu ?

3. Tu souhaites appliquer un style à tous les éléments <button> qui sont actuellement activés (lorsqu’un utilisateur clique dessus et que l’état est maintenu). Quel sélecteur CSS utiliserais-tu ?

4. Tu veux appliquer un style à tous les éléments <ul> qui contiennent au moins un élément <li> avec la classe .active. Quel sélecteur CSS utiliserais-tu ?

5. Imaginons une page avec plusieurs cartes d’information sous forme de blocs <div>. Certaines cartes ont un fond de couleur rouge, d’autres un fond vert. Tu souhaites appliquer un style uniquement aux cartes ayant un fond rouge. Quel sélecteur CSS utiliserais-tu ?

6. Sur une page, tu as plusieurs sections et tu veux cibler toutes les sections après la troisième dans une liste de sections. Quel sélecteur CSS utiliserais-tu ?

7. Tu veux appliquer un style à tous les éléments <div> qui ont un enfant <h2> mais seulement si cet enfant <h2> contient un certain texte. Quel sélecteur CSS utiliserais-tu ?

8. Tu veux cibler tous les éléments <p> qui sont des enfants non directs d’un élément <section>. Quel sélecteur CSS utiliserais-tu ?

9. Tu as plusieurs boutons avec la classe .btn et tu souhaites appliquer un style uniquement aux boutons qui sont actuellement survolés (hover). Quel sélecteur CSS utiliserais-tu ?

10. Tu veux appliquer un style à tous les éléments <h3> qui sont suivis de trois éléments <p>. Quel sélecteur CSS utiliserais-tu ?

Vous pourrez aussi aimer

QCM HTML / CSS – Partie 14

QCM HTML / CSS – Partie 19

QCM HTML / CSS – Partie 57

Laisser un commentaire Annuler la réponse

1. Tu veux cibler tous les éléments <p> qui sont des descendants d’un élément avec la classe `.container`. Quel sélecteur CSS utiliserais-tu ?

2. Tu veux cibler tous les éléments <input> de type texte (`type="text"`). Quel sélecteur CSS utiliserais-tu ?

4. Tu veux appliquer un style à tous les éléments <ul> qui contiennent au moins un élément <li> avec la classe `.active`. Quel sélecteur CSS utiliserais-tu ?