QCM HTML / CSS – Partie 53

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 appliquer un style à tous les éléments <p> qui suivent un élément <h1> ou <h2>, mais pas un <h3>. Quel sélecteur CSS utiliserais-tu ?

A h1 + p, h2 + p, :not(h3 + p)

B h1 + p, h2 + p, :not(h3 ~ p)

C h1 ~ p, h2 ~ p, :not(h3 + p)

D h1 + p, h2 + p

Le sélecteur h1 + p, h2 + p, :not(h3 ~ p) applique un style aux éléments <p> qui suivent immédiatement un <h1> ou <h2>, mais ignore ceux qui suivent un <h3>. Le + sélectionne les frères immédiats, et :not(h3 ~ p) exclut les éléments <p> qui suivent un <h3>.

2. Tu veux appliquer un style à tous les liens <a> qui contiennent l’attribut data-role égal à `"admin"`. Quel sélecteur CSS utiliserais-tu ?

A a[data-role="admin"]

B a[data-role="admin"]:link

C a[data-role="admin"]:visited

D a[role="admin"]

Le sélecteur a[data-role="admin"] cible tous les éléments <a> qui ont un attribut data-role avec la valeur "admin". C’est un sélecteur d’attribut très puissant pour cibler des éléments en fonction de leurs attributs spécifiques.

3. Tu veux appliquer un style à tous les éléments <input> de type `"text"`, mais seulement lorsqu’ils sont désactivés. Quel sélecteur CSS utiliserais-tu ?

A input[type="text"]:disabled

B input[type="text"]:not(:enabled)

C input[type="text"]:focus:disabled

D input[type="text"]:disabled:focus

Le sélecteur input[type="text"]:disabled applique un style à tous les éléments <input> de type "text" qui ont l’attribut disabled. La pseudo-classe :disabled est utilisée pour cibler les éléments désactivés dans un formulaire.

4. Tu veux appliquer un style à tous les éléments <p> avant le dernier <h2> sur la page. Quel sélecteur CSS utiliserais-tu ?

A p:nth-child(-n+last-of-type(h2))

B p ~ h2:last-of-type

C p:not(:last-of-type) ~ h2

D p:not(h2:last-child)

Le sélecteur p ~ h2:last-of-type sélectionne tous les éléments <p> qui se trouvent avant le dernier <h2>. Le ~ est un sélecteur de relation de frère général qui applique un style à tous les frères de type spécifié. Le :last-of-type permet de cibler le dernier élément <h2>.

5. Tu veux appliquer un style à tous les liens <a> lorsqu’ils sont en survol et ont été visités. Quel sélecteur CSS utiliserais-tu ?

A a:hover:link:visited

B a:hover:visited

C a:visited:hover

D a:visited:hover:link

Le sélecteur a:visited:hover applique un style aux liens <a> lorsqu’ils sont à la fois visités et en survol. Le sélecteur :visited permet de cibler les liens déjà visités, et :hover cible les liens sur lesquels l’utilisateur passe la souris.

6. Tu veux appliquer un style à tous les éléments <button> qui n’ont pas l’attribut disabled. Quel sélecteur CSS utiliserais-tu ?

A button:not([disabled])

B button:not([disabled=true])

C button[disabled]:not()

D button[disabled=false]

Le sélecteur button:not([disabled]) applique un style à tous les éléments <button> qui n’ont pas l’attribut disabled. La pseudo-classe :not() exclut les éléments avec l’attribut disabled.

7. Tu veux appliquer un style à tous les éléments <ul> qui contiennent exactement deux éléments <li>. Quel sélecteur CSS utiliserais-tu ?

A ul:has(li:nth-child(2))

B ul > li:nth-child(2)

C ul > li:nth-of-type(2)

D ul:has(> li:nth-child(2))

Le sélecteur ul:has(li:nth-child(2)) permet de cibler un élément <ul> qui contient exactement deux éléments <li>. Le :has() permet de sélectionner un parent en fonction de ses enfants, bien que cette fonctionnalité ne soit pas encore supportée de manière complète par tous les navigateurs.

8. Tu veux appliquer un style à tous les champs <input> qui sont de type « checkbox » et qui sont cochés, mais pas à ceux qui sont désactivés. Quel sélecteur CSS utiliserais-tu ?

A input[type="checkbox"]:checked:enabled

B input[type="checkbox"]:checked:not(:disabled)

C input[type="checkbox"]:enabled:checked

D input[type="checkbox"]:disabled:checked

Le sélecteur input[type="checkbox"]:checked:not(:disabled) applique un style uniquement aux éléments <input> de type "checkbox" qui sont à la fois cochés et non désactivés. Le :checked cible les cases cochées, et :not(:disabled) exclut les cases désactivées.

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

A li:nth-child(3), li:nth-child(5)

B li:nth-child(3n+5)

C li:nth-of-type(3), li:nth-of-type(5)

D li:nth-child(odd)

Le sélecteur li:nth-child(3), li:nth-child(5) applique un style à tous les éléments <li> qui sont soit à la 3ème, soit à la 5ème position dans la liste. Cela permet de cibler plusieurs éléments de manière précise en utilisant des sélecteurs séparés par une virgule.

10. Tu veux appliquer un style à tous les éléments <p> qui contiennent le mot « CSS », peu importe la casse (minuscule ou majuscule). Quel sélecteur CSS utiliserais-tu ?

A p:has("CSS")

B p:contains(text("CSS"))

C p:contains("CSS")

D p:has(:contains("CSS"))

Bien que le sélecteur p:contains("CSS") puisse fonctionner avec jQuery ou JavaScript, il n’est pas natif du CSS pur. CSS standard ne permet pas de sélectionner un élément basé sur son contenu textuel. Cette fonctionnalité est donc uniquement disponible via des bibliothèques comme jQuery ou d’autres techniques JavaScript.

QCMs qui pourraient vous intéresser :

1. Tu veux appliquer un style à tous les éléments <p> qui suivent un élément <h1> ou <h2>, mais pas un <h3>. Quel sélecteur CSS utiliserais-tu ?

2. Tu veux appliquer un style à tous les liens <a> qui contiennent l’attribut data-role égal à "admin". Quel sélecteur CSS utiliserais-tu ?

3. Tu veux appliquer un style à tous les éléments <input> de type "text", mais seulement lorsqu’ils sont désactivés. Quel sélecteur CSS utiliserais-tu ?

4. Tu veux appliquer un style à tous les éléments <p> avant le dernier <h2> sur la page. Quel sélecteur CSS utiliserais-tu ?

5. Tu veux appliquer un style à tous les liens <a> lorsqu’ils sont en survol et ont été visités. Quel sélecteur CSS utiliserais-tu ?

6. Tu veux appliquer un style à tous les éléments <button> qui n’ont pas l’attribut disabled. Quel sélecteur CSS utiliserais-tu ?

7. Tu veux appliquer un style à tous les éléments <ul> qui contiennent exactement deux éléments <li>. Quel sélecteur CSS utiliserais-tu ?

8. Tu veux appliquer un style à tous les champs <input> qui sont de type « checkbox » et qui sont cochés, mais pas à ceux qui sont désactivés. Quel sélecteur CSS utiliserais-tu ?

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

10. Tu veux appliquer un style à tous les éléments <p> qui contiennent le mot « CSS », peu importe la casse (minuscule ou majuscule). Quel sélecteur CSS utiliserais-tu ?

Vous pourrez aussi aimer

QCM HTML / CSS – Partie 3

QCM HTML / CSS – Partie 39

QCM HTML / CSS – Partie 51

Laisser un commentaire Annuler la réponse

2. Tu veux appliquer un style à tous les liens <a> qui contiennent l’attribut data-role égal à `"admin"`. Quel sélecteur CSS utiliserais-tu ?

3. Tu veux appliquer un style à tous les éléments <input> de type `"text"`, mais seulement lorsqu’ils sont désactivés. Quel sélecteur CSS utiliserais-tu ?