pseudo-classe checked / sélecteur d'attribut / background-position
Bonjour,
Voilà, j'expérimente un code tiré d'un livre, ça ne fonctionne pas et je ne vois pas pourquoi...
Voici les codes :
Code:
1
2
3
4
5
6
7
8
|
<label>
<input type="checkbox" id="cbox1" value="checkbox1">
Voici la première case.
</label>
<div class="testimg">
<!-- Sinon rien ne s'affiche -->
</div> |
Fichier : exercice16 ("css")
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/* 1 */
/* Utilisation d'un sprite */
intput[type="checkbox"]{
background-image: url("../img/test/sprite.jpg");
background-position: 0 0;
} /* Ne fonctionne pas */
/* 2 */
/* Une fois, la checkbox cochée, on décale l'image d'arrière-plan */
/* pour afficher la partie correspondant à une checkbox cochée */
intput[type="checkbox"]:checked {
background-position: 0 16px;
} /* Ne fonctionne pas */
/* 3 */
/*Test pour voir si le chemin est correct, oui !*/
.testimg {background-image: url("../img/test/sprite.jpg");
background-position:0 16px;} /* Fonctionne*/ |
Le but est de faire l'exercice, d'utiliser pour la première fois la technique du "sprite". J'ai créé une image d'une largeur de 16px sur une hauteur de 32px.
Seul le code 3 fonctionne,
Je test cela sous Google Chrome,
Via f12, seul le code 3 montre le fichier nommé exercice16.css
Via f12, le code 1 et 2, n'affichent pas le fichier exercice16.css
Concrètement, le look par défaut d'une case à côché reste, comme si le fichier exercice16 est ignoré.
Pourriez-vous m'aider s'il vous plaît ?
Cordialement,
