QCM HTML / CSS – Partie 48

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. Quelle balise HTML est utilisée pour ajouter une date et une heure dans un format structuré ?

A <date>

B <time>

C <datetime>

D <timestamp>

La balise <time> est utilisée pour définir une date ou une heure. Elle peut aussi inclure des informations d’attribut, comme datetime, pour spécifier la date et l’heure exactes. Cela permet aux moteurs de recherche et autres applications d’interpréter correctement l’information.

2. Quelle balise est utilisée pour afficher une image en arrière-plan d’un élément HTML ?

A <background>

B <image>

C <style>

D <div style="background-image:url('image.jpg')">

Pour ajouter une image en arrière-plan d’un élément HTML, vous pouvez utiliser la propriété CSS background-image directement dans le style de la balise, par exemple avec une <div>. La balise <div> est un conteneur générique qui peut être stylisé avec du CSS pour afficher une image de fond.

3. Tu as une section <div> contenant à la fois des éléments <p>, <h2>, et <span>. Tu veux cibler tous les éléments <h2> mais uniquement ceux qui sont précédés d’un <p> dans le même parent <div>. Quel sélecteur CSS utiliserais-tu ?

A div > p + h2

B div p + h2

C div h2 ~ p

D div > h2:preceding(p)

Le sélecteur div > p + h2 sélectionne un élément <h2> qui suit immédiatement un <p> dans un même parent <div>. Le sélecteur + fait référence à un frère immédiat, ce qui signifie que <h2> doit être directement après le <p>. La sélection n’est pas affectée par d’autres éléments entre les deux.

4. Tu souhaites appliquer un style uniquement aux éléments <div> qui sont cachés, mais tu utilises l’attribut `aria-hidden="true"` pour cela. Quel sélecteur CSS utiliserais-tu ?

A div[aria-hidden="true"]

B div[hidden]

C div:aria-hidden(true)

D div:not([aria-hidden="false"])

Le sélecteur div[aria-hidden="true"] cible les éléments <div> ayant l’attribut aria-hidden avec la valeur « true ». Cela permet de cibler les éléments explicitement marqués comme cachés via l’attribut aria-hidden, qui est une bonne pratique d’accessibilité.

5. Tu veux cibler uniquement les éléments visibles dans un conteneur, excluant les éléments avec `display: none` ou `visibility: hidden`. Quel sélecteur CSS est le plus approprié ?

A div:visible

B div:not([hidden])

C div:visible:not([display="none"])

D Il n’existe pas de sélecteur CSS pour cela

Il n’existe pas de sélecteur CSS pur pour cibler directement les éléments visibles. Les sélecteurs CSS ne peuvent pas vérifier dynamiquement si un élément est visible ou non sur la page. Pour cela, il faut utiliser JavaScript pour vérifier la visibilité des éléments.

6. Tu veux cibler tous les liens <a> sur ta page, mais seulement ceux qui ont été cliqués et qui sont dans un état actif. Quel sélecteur utiliserais-tu ?

A a:focus:active

B a:visited:active

C a:active

D a:visited:focus

Le sélecteur a:visited:active cible les liens qui ont été cliqués (état visited) et qui sont actuellement dans l’état active (lorsque l’utilisateur clique dessus). Ce sélecteur est utile pour appliquer un style particulier aux liens déjà visités, lorsqu’ils sont cliqués.

7. Tu veux cibler tous les éléments <li> dans une liste, mais uniquement ceux qui se trouvent dans une position pair et ont un enfant <span> à l’intérieur. Quel sélecteur CSS utiliserais-tu ?

A li:nth-child(even) > span

B li:nth-child(even):has(span)

C li:even > span

D li:nth-child(2n):has(span)

Le sélecteur li:nth-child(even):has(span) permet de cibler les éléments <li> qui sont dans une position paire (2e, 4e, etc.) et qui ont un enfant <span>. Le :has() est un sélecteur qui permet de vérifier si un élément contient un certain type d’enfant, bien que ce sélecteur soit encore expérimental dans certains navigateurs.

8. Imaginons une structure de page où tu as plusieurs <section> et tu souhaites appliquer un style à tous les éléments <p> qui sont à l’intérieur de la section ayant la classe `.highlighted`. Quel sélecteur utiliserais-tu ?

A .highlighted p

B section p.highlighted

C .highlighted > p

D .highlighted :p

Le sélecteur .highlighted p cible tous les éléments <p> à l’intérieur d’une section avec la classe .highlighted. Cela permet de cibler uniquement les paragraphes au sein de cette section spécifique, indépendamment de leur position dans la hiérarchie.

9. Tu veux appliquer un style uniquement aux éléments <h2> qui sont précédés de deux éléments <p>, dans une structure de page où chaque <h2> peut être précédé de différents types d’éléments. Quel sélecteur utiliserais-tu ?

A p + p + h2

B p ~ p + h2

C p > p + h2

D h2:preceding(p + p)

Le sélecteur p + p + h2 sélectionne un élément <h2> qui est précédé de deux éléments <p>. Le sélecteur + sélectionne l’élément immédiatement suivant, donc p + p + h2 assure que le deuxième <p> est juste avant le <h2>. Cette structure permet de cibler spécifiquement cette relation.

10. Tu souhaites appliquer un style à un élément <p> uniquement si son parent est un <div> avec une classe container. Quel sélecteur CSS utiliserais-tu ?

A div.container > p

B div > .container p

C .container p

D div p.container

Le sélecteur div.container > p permet de cibler tous les éléments <p> qui sont enfants directs d’un <div> avec la classe .container. Cela garantit que tu n’appliques le style qu’aux éléments <p> directement sous ce parent spécifique.

QCMs qui pourraient vous intéresser :

1. Quelle balise HTML est utilisée pour ajouter une date et une heure dans un format structuré ?

2. Quelle balise est utilisée pour afficher une image en arrière-plan d’un élément HTML ?

3. Tu as une section <div> contenant à la fois des éléments <p>, <h2>, et <span>. Tu veux cibler tous les éléments <h2> mais uniquement ceux qui sont précédés d’un <p> dans le même parent <div>. Quel sélecteur CSS utiliserais-tu ?

4. Tu souhaites appliquer un style uniquement aux éléments <div> qui sont cachés, mais tu utilises l’attribut aria-hidden="true" pour cela. Quel sélecteur CSS utiliserais-tu ?

5. Tu veux cibler uniquement les éléments visibles dans un conteneur, excluant les éléments avec display: none ou visibility: hidden. Quel sélecteur CSS est le plus approprié ?

6. Tu veux cibler tous les liens <a> sur ta page, mais seulement ceux qui ont été cliqués et qui sont dans un état actif. Quel sélecteur utiliserais-tu ?

7. Tu veux cibler tous les éléments <li> dans une liste, mais uniquement ceux qui se trouvent dans une position pair et ont un enfant <span> à l’intérieur. Quel sélecteur CSS utiliserais-tu ?

8. Imaginons une structure de page où tu as plusieurs <section> et tu souhaites appliquer un style à tous les éléments <p> qui sont à l’intérieur de la section ayant la classe .highlighted. Quel sélecteur utiliserais-tu ?

9. Tu veux appliquer un style uniquement aux éléments <h2> qui sont précédés de deux éléments <p>, dans une structure de page où chaque <h2> peut être précédé de différents types d’éléments. Quel sélecteur utiliserais-tu ?

10. Tu souhaites appliquer un style à un élément <p> uniquement si son parent est un <div> avec une classe container. Quel sélecteur CSS utiliserais-tu ?

Vous pourrez aussi aimer

QCM HTML / CSS – Partie 19

QCM HTML / CSS – Partie 2

QCM HTML / CSS – Partie 16

Laisser un commentaire Annuler la réponse

4. Tu souhaites appliquer un style uniquement aux éléments <div> qui sont cachés, mais tu utilises l’attribut `aria-hidden="true"` pour cela. Quel sélecteur CSS utiliserais-tu ?

5. Tu veux cibler uniquement les éléments visibles dans un conteneur, excluant les éléments avec `display: none` ou `visibility: hidden`. Quel sélecteur CSS est le plus approprié ?

8. Imaginons une structure de page où tu as plusieurs <section> et tu souhaites appliquer un style à tous les éléments <p> qui sont à l’intérieur de la section ayant la classe `.highlighted`. Quel sélecteur utiliserais-tu ?