Exercice : préparer une page pour utiliser les sélecteurs CSS

Crée une page HTML contenant les éléments suivants :

1. Un titre principal <h1> avec le texte : « Ma première page de sélecteurs ».
2. Deux paragraphes <p> :
   • Le premier doit avoir l’attribut id="intro" et contenir un texte de présentation de ton choix.
   • Le second doit avoir la classe class="info" et contenir un texte d’information de ton choix.
3. Une liste non ordonnée <ul> avec trois éléments <li> :
   • Le premier doit avoir la classe class="important".
   • Le deuxième ne doit avoir aucune classe.
   • Le troisième doit avoir la classe class="secondaire".
4. Un lien <a> vers l’adresse https://www.example.com avec le texte : « Visiter Exemple ».

Organise bien ton code pour qu’on puisse plus tard cibler les éléments :

• par balise (par exemple tous les <p>),
• par id (par exemple #intro),
• par classe (par exemple .info, .important, .secondaire),
• par attribut (par exemple le lien avec l’attribut href="https://www.example.com").

Exercice : Utiliser le sélecteur CSS :nth-child()

Dans cet exercice, tu dois préparer une structure HTML qui permettra ensuite d'appliquer différentes règles CSS utilisant :nth-child(). Ne mets aucun style pour l’instant.

Consignes

1. Crée une liste non ordonnée <ul> contenant 6 éléments <li>. Le texte de chaque élément doit indiquer sa position, par exemple : « Élément 1 », « Élément 2 », etc.
2. Ajoute ensuite une deuxième liste <ol> contenant 5 éléments <li>. Le texte doit également indiquer leur numéro.

1. Cible le premier élément.
2. Cible le troisième élément.
3. Cible tous les éléments pairs.
4. Cible tous les éléments impairs.
5. Cible chaque 4e élément.

Exercice : Utiliser les sélecteurs CSS d'attribut

Crée une page HTML contenant les éléments suivants. Aucun style ne doit être ajouté.

1. Trois liens <a> :
   • Un lien avec href="https://www.google.com"
   • Un lien avec href="https://www.example.com"
   • Un lien avec href="#section1"
2. Trois champs de formulaire <input> :
   • Un input avec type="text"
   • Un input avec type="password"
   • Un input avec type="email"
3. Un paragraphe <p> avec l’attribut data-role="info".

Cible les sélecteurs suivants, en leur associant un background de ton choix :

1. Cible tous les liens ayant un attribut href
2. Cible liens commençant par https
3. Cible liens finissant par .com
4. Cible le champ mot de passe
5. Cible les éléments ayant un attribut data-role
6. Cible les éléments dont data-role vaut exactement "info"