08 Déc2015

Cibler des éléments dans un état en utilisant les sélecteurs pseudo classes

SAOUD |  CSS |  Chapitre: Les sélecteurs |  19404 visites |  Moyen |  Corrigé

Objectif : 

L'objectif de cet exercice est de cibler des éléments HTML dans un certain état en se basant sur les pseudo classes CSS : first-child, nth-child(), last-child, link, visited, hover ...

Exercice 1:

Soit un code html contenant deux liens :

<a href="http://www.exelib.net/exercices/developpement-web/html/">Exercices HTML</a>
<a href="http://www.exelib.net/exercices/programmation/langage-c/">Exercices C</a>

Utiliser les pseudo classes ":hover" ":visited" ":active" dans l'ordre convenable afin de définir l'apparence des liens comme suit :

  • Les liens survolés: non soulignés avec un background  "#7E3661" et une couleur de texte blanche.
  • Les liens visités : avec une couleur de texte égale à "#FCB941"
  • Les liens (état cliqué) : avec une taille de 1.5em.

Exercice 2:

On considère le tableau html suivant :

tableau-fusion-cellules
Tableau avec fusion de cellules

Vous pouvez consulter son code html disponible en correction: Fusion de cellules

Travail à faire :

  1. Changer la taille du titre à "1.5em" en affichant la première lettre de chaque mot en capitale.
  2. Enlever la bordure pour le tableau.
  3. Ajouter une marge interne de 10px et un alignement centré pour tous les cellules "th et td".
  4. Cibler  la deuxième balise "th" de la première "tr" qui contient le mois du planning pour lui changer la taille en "2em" et la couleur en bleu.
  5. Mettre en  background "#FCB941"  tous lignes "tr" du tbody qui viennent en positions paires et en background "#F1654C" les lignes qui viennent en positions impaires (Utiliser le pseudo classe "nth-child").
  6. Donner à la première cellule de chaque ligne en position impaire ,un background "#7E3661" et une couleur "#fff".(Utiliser les pseudo classes nth-child et first-child)
  7. Donner à la première cellule de chaque ligne en position paire ,un background "#888888" et une couleur "#fff".(Utiliser les pseudo classes nth-child et first-child)
  8. Donner à la dernière cellule de chaque ligne en position impaire ,un background "#8870FF" et une couleur "#fff".(Utiliser les pseudo classes nth-child et last-child)
  9. Enlever la bordure droite et la bordure du haut, de la dernière cellule "th" qui possède un attribut "rowspan" (utiliser le pseudo classe "last-child' et un sélecteur d'attribut pour "rowspan".

Résultat à atteindre:

tableau-pseudo-classes
Tableau avec pseudo classes CSS

  1. L'ordre par priorité croissante des états d'un lien est : 

    link --> visited --> hover -->active

    Donc le code css doit respecter cet ordre comme suit  :

    a:visited{
	color: #FCB941;
}
a:hover{
	text-decoration: none;
	color: white;
	background: #8870FF;
}
a:active{
	font-size: 1.5em;
}

  2. Dans l'exercice 2 on va utiliser les pseudo classes nth-child ,first-child,last-child sur les balises "tr td et th".

    caption{
	font-size: 1.5em;
	text-transform: capitalize;
}
table{
	border:none;
}

th,td{
	padding: 10px;
	text-align: center;
}
/* cibler la deuxieme th de la première tr */
tr:first-child th:nth-child(2){
	font-size: 2em;
	color: blue;
}
/* cibler les tr en position paire dans la balise tbody */
tbody tr:nth-child(2n){
	background-color: #FCB941;
}
tbody tr:nth-child(2n+1){
	background-color: #F1654C;
}
/* cibler la première cellule de chaque ligne en position paire  */
tr:nth-child(odd)>td:first-child{
	background-color: #7E3661;
	color:#fff;

}
tr:nth-child(even)>td:first-child{
	background-color: #888888;
	color:#fff;

}
tr:nth-child(odd)>td:last-child{
	background-color: #8870FF;
	color:#fff;

}
/* cibler la dernière th qui possède un attribut "rowspan" */
th:last-child[rowspan]{
	border-right:none;
	border-top:none;
}

     

Nouveaux Exercices

Exercices populaires

Nouveaux Examens

Examens populaires