QCM HTML / CSS – Partie 52

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 aux éléments <input> qui ont un attribut `data-index` avec une valeur numérique inférieure à 5. Quel sélecteur CSS utiliserais-tu ?

A input[data-index<5]

B input[data-index="5"]

C input[data-index]

D input[data-index=""]

En CSS pur, il n’est pas possible de faire des comparaisons numériques sur les valeurs d’un attribut (comme data-index<5). Le sélecteur input[data-index] applique un style à tous les éléments <input> ayant un attribut data-index, peu importe la valeur. Pour une comparaison numérique, il faudrait utiliser JavaScript.

2. Tu veux cibler tous les éléments <section> qui ont exactement 3 éléments enfants. Quel sélecteur CSS utiliserais-tu ?

A section:nth-child(3)

B section:has(> *:nth-child(3))

C section:only-child

D section:nth-of-type(3)

Le sélecteur section:has(> *:nth-child(3)) est un sélecteur combiné qui permet de cibler un <section> ayant exactement 3 enfants directs. Le :has() permet de vérifier qu'un élément a un enfant spécifique. Cependant, cette fonctionnalité est encore expérimentale dans certains navigateurs, donc elle ne fonctionne pas partout.

3. Tu veux appliquer un style à tous les éléments <div> qui contiennent au moins un élément <p> avec la classe `.highlighted`. Quel sélecteur CSS utiliserais-tu ?

A div > p.highlighted

B div + p.highlighted

C div > .highlighted

D div:has(p.highlighted)

Le sélecteur div:has(p.highlighted) permet de cibler tous les éléments <div> qui contiennent un enfant <p> avec la classe .highlighted. Le :has() permet de sélectionner un parent en fonction de son contenu enfant, mais cette fonctionnalité n'est pas encore supportée de manière universelle dans tous les navigateurs.

4. Tu veux appliquer un style uniquement aux éléments <input> qui sont de type "checkbox" et qui sont cochés. Quel sélecteur CSS utiliserais-tu ?

A input[type="checkbox"]:checked

B input[type="checkbox"]:focus

C input:checked[type="checkbox"]

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

Le sélecteur input[type="checkbox"]:checked permet de cibler uniquement les éléments <input> de type checkbox qui sont actuellement cochés. Ce sélecteur est extrêmement utile pour cibler des cases à cocher dans un formulaire.

5. Tu veux appliquer un style à tous les éléments <p> qui suivent immédiatement un élément <h2> dans un conteneur, mais seulement si cet élément <h2> contient un certain texte. Quel sélecteur CSS utiliserais-tu ?

A h2 + p:contains("texte")

B h2:has(+ p):contains("texte")

C h2 + p:has(:contains("texte"))

D h2 + p

Le sélecteur h2 + p:contains("texte") permet de cibler un élément <p> qui suit immédiatement un <h2> et qui contient le texte "texte". Cependant, il faut noter que le sélecteur :contains() n'est pas natif en CSS pur, il est souvent utilisé avec des bibliothèques comme jQuery. En CSS natif, il n'est pas possible de cibler un élément par son texte, donc cela pourrait être un cas à gérer avec JavaScript.

6. Tu veux appliquer un style à tous les éléments <input> de type radio qui ont l'attribut `disabled`. Quel sélecteur CSS utiliserais-tu ?

A input[type="radio"]:disabled

B input[disabled][type="radio"]

C input[type="radio"]:checked:disabled

D input[disabled]:radio

Le sélecteur input[type="radio"]:disabled cible tous les éléments <input> de type radio qui ont l'attribut disabled. Ce sélecteur est très utile pour désactiver l'interaction avec certaines options de type radio dans un formulaire.

7. Tu veux appliquer un style à tous les éléments <p> qui ne sont pas précédés par un élément <h1>. Quel sélecteur CSS utiliserais-tu ?

A p:not(h1 ~ p)

B p:not(:has(h1))

C p:not(:preceded-by(h1))

D p:not(h1 + p)

Le sélecteur p:not(h1 + p) applique un style à tous les éléments <p> qui ne sont pas immédiatement précédés par un élément <h1>. Le + est un sélecteur de frère immédiat, ce qui signifie que cette règle exclut les <p> qui suivent directement un <h1>.

8. Tu veux appliquer un style à tous les éléments <div> qui ont un enfant <p> à la quatrième position dans leur parent. Quel sélecteur CSS utiliserais-tu ?

A div p:nth-child(4)

B div:nth-child(4) p

C div > p:nth-child(4)

D div p:nth-of-type(4)

Le sélecteur div > p:nth-child(4) cible le quatrième enfant <p> qui est un enfant direct d'un élément <div>. Le nth-child(4) permet de spécifier une position particulière parmi les enfants.

9. Tu veux appliquer un style à tous les liens <a> qui ont été visités, mais seulement si leur texte est de couleur rouge. Quel sélecteur CSS utiliserais-tu ?

A a:visited { color: red; }

B a:visited:color(red)

C a:visited { color: red; }

D a:visited:not(:color(red))

Le sélecteur a:visited cible les liens qui ont été visitée par l'utilisateur, et color: red; s'assure que le texte de ces liens est de couleur rouge.

10. Tu veux appliquer un style à tous les éléments <div> qui contiennent un élément <p> qui est actuellement en survol. Quel sélecteur CSS utiliserais-tu ?

A div:hover p

B div:has(p:hover)

C div > p:hover

D div p:focus

Le sélecteur div:has(p:hover) permet de cibler un <div> qui contient un enfant <p> en survol. Le :has() est une pseudo-classe parent qui permet de sélectionner un élément en fonction de son contenu enfant, mais cette fonctionnalité est encore en développement dans certains navigateurs.

QCMs qui pourraient vous intéresser :

1. Tu veux appliquer un style aux éléments <input> qui ont un attribut data-index avec une valeur numérique inférieure à 5. Quel sélecteur CSS utiliserais-tu ?

2. Tu veux cibler tous les éléments <section> qui ont exactement 3 éléments enfants. Quel sélecteur CSS utiliserais-tu ?

3. Tu veux appliquer un style à tous les éléments <div> qui contiennent au moins un élément <p> avec la classe .highlighted. Quel sélecteur CSS utiliserais-tu ?

4. Tu veux appliquer un style uniquement aux éléments <input> qui sont de type "checkbox" et qui sont cochés. Quel sélecteur CSS utiliserais-tu ?

5. Tu veux appliquer un style à tous les éléments <p> qui suivent immédiatement un élément <h2> dans un conteneur, mais seulement si cet élément <h2> contient un certain texte. Quel sélecteur CSS utiliserais-tu ?

6. Tu veux appliquer un style à tous les éléments <input> de type radio qui ont l'attribut disabled. Quel sélecteur CSS utiliserais-tu ?

7. Tu veux appliquer un style à tous les éléments <p> qui ne sont pas précédés par un élément <h1>. Quel sélecteur CSS utiliserais-tu ?

8. Tu veux appliquer un style à tous les éléments <div> qui ont un enfant <p> à la quatrième position dans leur parent. Quel sélecteur CSS utiliserais-tu ?

9. Tu veux appliquer un style à tous les liens <a> qui ont été visités, mais seulement si leur texte est de couleur rouge. Quel sélecteur CSS utiliserais-tu ?

10. Tu veux appliquer un style à tous les éléments <div> qui contiennent un élément <p> qui est actuellement en survol. Quel sélecteur CSS utiliserais-tu ?

Vous pourrez aussi aimer

QCM HTML / CSS – Partie 48

QCM HTML / CSS – Partie 42

QCM HTML / CSS – Partie 11

Laisser un commentaire Annuler la réponse

1. Tu veux appliquer un style aux éléments <input> qui ont un attribut `data-index` avec une valeur numérique inférieure à 5. Quel sélecteur CSS utiliserais-tu ?

3. Tu veux appliquer un style à tous les éléments <div> qui contiennent au moins un élément <p> avec la classe `.highlighted`. Quel sélecteur CSS utiliserais-tu ?

6. Tu veux appliquer un style à tous les éléments <input> de type radio qui ont l'attribut `disabled`. Quel sélecteur CSS utiliserais-tu ?