QCM HTML / CSS – Partie 51

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 <li> d’une liste, mais seulement ceux dont l’index est un multiple de 4 (4e, 8e, 12e, etc.). Quel sélecteur CSS utiliserais-tu ?

A li:nth-child(4n)

B li:nth-of-type(4)

C li:nth-child(4)

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

Le sélecteur li:nth-child(4n) sélectionne tous les éléments <li> qui occupent une position qui est un multiple de 4 dans la liste. Le 4n signifie que l’élément est à l’index 4, 8, 12, etc., dans la structure des enfants.

2. Tu veux cibler tous les éléments <input> qui sont de type texte et ont un attribut `readonly`. Quel sélecteur CSS utiliserais-tu ?

A input[type="text"]:readonly

B input[type="text"]:disabled

C input[readonly][type="text"]

D input[type="text"]:checked

Le sélecteur input[readonly][type="text"] cible tous les éléments <input> qui ont à la fois un attribut readonly et un attribut type="text". Ce sélecteur permet de cibler spécifiquement les champs de texte qui sont en mode lecture seule.

3. Tu veux appliquer un style à tous les éléments <li> qui sont les 5 premiers éléments dans une liste. Quel sélecteur CSS utiliserais-tu ?

A li:nth-child(-n+5)

B li:nth-child(5n)

C li:first-of-type(5)

D li:nth-of-type(5)

Le sélecteur li:nth-child(-n+5) sélectionne les 5 premiers éléments <li> de la liste. L’expression -n+5 permet de cibler les éléments qui se trouvent dans les positions de 1 à 5.

4. Tu souhaites cibler tous les éléments <input> qui ont un attribut data-id avec une valeur supérieure à 10. Quel sélecteur CSS utiliserais-tu ?

A input[data-id="10"]

B input[data-id^="10"]

C input[data-id|="10"]

D input[data-id]

Le sélecteur input[data-id] sélectionne tous les éléments <input> ayant l’attribut data-id, quel que soit sa valeur. Cependant, pour cibler spécifiquement les valeurs supérieures à 10, tu devrais utiliser JavaScript, car CSS ne permet pas de comparer numériquement des attributs de cette manière.

5. Tu as une liste de tâches dans une <ul>, et tu veux appliquer un style à chaque élément <li> suivi immédiatement par un autre <li> ayant la classe `.completed`. Quel sélecteur CSS utiliserais-tu ?

A li + li.completed

B li:has(+ li.completed)

C li ~ li.completed

D li.completed + li

Le sélecteur li + li.completed applique un style à un élément <li> qui suit immédiatement un autre <li> avec la classe .completed. Le + est un sélecteur de frère immédiat, ce qui signifie qu’il cible le second <li> seulement s’il suit directement le premier.

6. Tu veux appliquer un style uniquement aux éléments <h3> qui sont placés avant le dernier élément <p> dans un conteneur. Quel sélecteur CSS utiliserais-tu ?

A h3 ~ p:last-of-type

B h3:nth-last-child(n)

C h3:nth-child(-n+last-of-type)

D h3 ~ p:first-child

Le sélecteur h3 ~ p:last-of-type cible tous les éléments <h3> qui sont suivis par un élément <p> qui est le dernier de son type dans le parent. Ce sélecteur de relation de frère général (~) permet de cibler les éléments qui viennent avant un <p> spécifique.

7. Sur une page de formulaires, tu veux appliquer un style à tous les champs <input> sauf ceux qui ont l’attribut `type="password"`. Quel sélecteur CSS utiliserais-tu ?

A input:not(type="password")

B input:not([type="password"])

C input:not(password)

D input:not([type="password"]) :focus

Le sélecteur input:not([type="password"]) applique un style à tous les éléments <input> sauf ceux qui ont un attribut type="password". Le :not() est une pseudo-classe qui exclut des éléments en fonction d’une condition spécifique.

8. Sur une page web, tu as plusieurs éléments <div> ayant à la fois la classe `.box` et un attribut `data-active="true"`. Quel sélecteur CSS utiliserais-tu pour cibler ces éléments ?

A .box[data-active="true"]

B .box[active="true"]

C div.box[data-active="true"]

D .box[data-active="false"]

Le sélecteur .box[data-active="true"] cible tous les éléments <div> ayant à la fois la classe .box et un attribut data-active égal à "true". C’est un sélecteur combiné utilisant à la fois la classe et l’attribut pour un ciblage précis.

9. Tu veux appliquer un style uniquement aux éléments <span> qui contiennent le texte « Urgent ». Quel sélecteur CSS utiliserais-tu ?

A span:contains("Urgent")

B span[innerHTML="Urgent"]

C span:has("Urgent")

D span:contains("Urgent")

Bien que le sélecteur span:contains("Urgent") ne soit pas natif en CSS pur, il peut être utilisé dans certains outils ou frameworks comme jQuery. En CSS pur, il n’est pas possible de cibler un élément en fonction de son contenu textuel. Cependant, en utilisant JavaScript ou jQuery, on pourrait très bien atteindre ce but avec la méthode contains.

10. Tu souhaites appliquer un style à tous les éléments <a> sauf ceux qui ont la classe `.disabled`. Quel sélecteur CSS utiliserais-tu ?

A a:not(:disabled)

B a.disabled

C a:not(.disabled)

D a:not[.disabled]

Le sélecteur a:not(.disabled) applique un style à tous les éléments <a>, sauf ceux ayant la classe .disabled. Le :not() est utilisé pour exclure des éléments d’un certain type ou d’une certaine classe.

QCMs qui pourraient vous intéresser :

1. Tu veux cibler tous les éléments <li> d’une liste, mais seulement ceux dont l’index est un multiple de 4 (4e, 8e, 12e, etc.). Quel sélecteur CSS utiliserais-tu ?

2. Tu veux cibler tous les éléments <input> qui sont de type texte et ont un attribut readonly. Quel sélecteur CSS utiliserais-tu ?

3. Tu veux appliquer un style à tous les éléments <li> qui sont les 5 premiers éléments dans une liste. Quel sélecteur CSS utiliserais-tu ?

4. Tu souhaites cibler tous les éléments <input> qui ont un attribut data-id avec une valeur supérieure à 10. Quel sélecteur CSS utiliserais-tu ?

5. Tu as une liste de tâches dans une <ul>, et tu veux appliquer un style à chaque élément <li> suivi immédiatement par un autre <li> ayant la classe .completed. Quel sélecteur CSS utiliserais-tu ?

6. Tu veux appliquer un style uniquement aux éléments <h3> qui sont placés avant le dernier élément <p> dans un conteneur. Quel sélecteur CSS utiliserais-tu ?

7. Sur une page de formulaires, tu veux appliquer un style à tous les champs <input> sauf ceux qui ont l’attribut type="password". Quel sélecteur CSS utiliserais-tu ?

8. Sur une page web, tu as plusieurs éléments <div> ayant à la fois la classe .box et un attribut data-active="true". Quel sélecteur CSS utiliserais-tu pour cibler ces éléments ?

9. Tu veux appliquer un style uniquement aux éléments <span> qui contiennent le texte « Urgent ». Quel sélecteur CSS utiliserais-tu ?

10. Tu souhaites appliquer un style à tous les éléments <a> sauf ceux qui ont la classe .disabled. Quel sélecteur CSS utiliserais-tu ?

Vous pourrez aussi aimer

QCM HTML / CSS – Partie 41

QCM HTML / CSS – Partie 48

QCM HTML / CSS – Partie 8

Laisser un commentaire Annuler la réponse

2. Tu veux cibler tous les éléments <input> qui sont de type texte et ont un attribut `readonly`. Quel sélecteur CSS utiliserais-tu ?

5. Tu as une liste de tâches dans une <ul>, et tu veux appliquer un style à chaque élément <li> suivi immédiatement par un autre <li> ayant la classe `.completed`. Quel sélecteur CSS utiliserais-tu ?

7. Sur une page de formulaires, tu veux appliquer un style à tous les champs <input> sauf ceux qui ont l’attribut `type="password"`. Quel sélecteur CSS utiliserais-tu ?

8. Sur une page web, tu as plusieurs éléments <div> ayant à la fois la classe `.box` et un attribut `data-active="true"`. Quel sélecteur CSS utiliserais-tu pour cibler ces éléments ?

10. Tu souhaites appliquer un style à tous les éléments <a> sauf ceux qui ont la classe `.disabled`. Quel sélecteur CSS utiliserais-tu ?