Discussion :

[Marlboro744]

Bonjour à toutes et à tous,

Voici le résultat que j'essaye de reproduire :

Et voici ce à quoi j'arrive :

J'ai utilisé un code CSS simple et qui avait déjà marché pour un exercice de ce type, mais ici les images ne s'affichent tout simplement pas.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<aside class="infos">
                    <div class="icone prix">Chère</div>
                    <div class="icone temps">Rapide</div>
                    <div class="icone commentaires">34 commentaires</div>
                </aside>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.infos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
 
.infos div {
    display: inline;
    padding-left: 100px;
    line-height: 100px;
    background-position: left;
    background-repeat: no-repeat;
}
 
.icone prix {
    background-image: url("img/iconePrix.png");
}
 
.icone temps {
    background-image: url("img/iconeTemps.png");
}
 
.icone commentaires {
    background-image: url("img/iconeCommentaires.png");

Merci d'avance pour vos suggestions.

[NoSmoking]

Bonjour,
tes sélecteurs ne sont pas corrects :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.icone prix {
    background-image: url("img/iconePrix.png");
}

cible un élément <prix> contenu dans un <élement class="icone">.

[jreaux62]

Bonjour,

en l'occurrence, quand on a 2 classes sur le même élément, il faut écrire .icone.prix {...} (sans espace).

[NoSmoking]

...il faut écrire .icone.prix {...} (sans espace).

là tu enlèves toute envie de recherche !

[Marlboro744]

Bien compris, je ne referai plus cette erreur. Merci.

[jreaux62]

là tu enlèves toute envie de recherche !

Tu as raison...
Encore faut-il indiquer / trouver les bons mot-clés à taper pour obtenir la réponse :

• "css sélectionner un sélecteur avec plusieurs classes"

on trouve alors (par exemple) :

• Sélectionner un élément basé sur plusieurs classes

[Marlboro744]

Mais une chose que je ne comprends pas : je n'ai qu'une seule classe ("icone prix") et non deux. Ou alors il faut considérer que "icone" est une classe à part entière ?