WayToLearnX

WayToLearnX

qcm-html-css-min
QCM HTML / CSS 

QCM HTML / CSS – Partie 51

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)

A
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

C
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)

A
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]

D
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

A
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

A
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

B
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"]

A
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")

A
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]

C
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 :

Vous pourrez aussi aimer

qcm-html-css-min

QCM HTML / CSS – Partie 18

Thomas 0
qcm-html-css-min

QCM HTML / CSS – Partie 56

Thomas 0
qcm-html-css-min

QCM HTML / CSS – Partie 16

Thomas 0

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *