28172 sujets

CSS et mise en forme, CSS3

[Résolu] Class CSS contenant un espace

Bonjour

voici mon pb
ma class html dans firebug est noté comme ceci :
<span class="woocommerce-Price-amount amount">blabla </span>


mais comment changer ses valeur CSS sachant que le css
ne reconnais pas un nom de class contenant un espace
ex

.woocommerce-Price-amount amount
{
font-size:19px;
}

comment faire ? qu'en pensez vous ?
merci merci Smiley smile
Modifié par artichaudd (29 Aug 2017 - 14:50)
Modérateur
Salut,

Ton span possède 2 classes : .woocommerce-Price-amount et .amount donc dans le CSS il faut taper dans l'une ou l'autre ou les deux combinées :

.woocommerce-Price-amount {
    // Ceux qui ont la classe woocommerce-Price-amount
}
.amount {
    // Ceux qui ont la classe amount
}
.woocommerce-Price-amount.amount {
    // Ceux qui ont les deux classes en meme temps
}
Meilleure solution
Bonjour,

Il vous faudra réviser le CSS.

Dans votre HTML il y a 2 classes: '.woocommerce-Price-amount' ET '.amount'.

Dans votre CSS vous ciblez un élément HTML 'amount' dont le parent est un élément HTML avec la classe' .woocommerce-Price-amount' sauf que il manque un point (.) avant amount pour cibler un élément par sa classe. Donc ça aurait du être :
.woocommerce-Price-amount .amount

Il est impossible d'avoir un espace dans un nom de classe.
merci a tout les 2 Smiley cligne
votre réponse me va, je ne savais pas que l'on pouvait attribuer dans class
top merci
Modifié par artichaudd (29 Aug 2017 - 15:25)
on peut attribuer autant de class que l'on veut pour un attribut. On peut même rajouter un ID même si son rôle est différent des class.
En css on peut même cibler par mots-clefs.

Pour un html :
<div class="MaPremiereClef">Un texte</div>
<div class="MaDeuxiemeClef">Un texte</div>

Le css pourra cibler les deux classes comme ceci :
[class*="Clef"] {
    color: red;
}

Modifié par Olivier C (29 Aug 2017 - 18:38)
Olivier,

merci pour cette précision sur la puissance du CSS.

Par ma simple curiosité, est-ce que ce genre de déclaration très générique n'impose pas énormément d'interprétation pour la navigateur ?
En d'autres termes, est que l'on ne ralentit pas ainsi le site, même si c'est très marginal.
CAMEO172 a écrit :
Olivier,

merci pour cette précision sur la puissance du CSS.

Par ma simple curiosité, est-ce que ce genre de déclaration très générique n'impose pas énormément d'interprétation pour la navigateur ?
En d'autres termes, est que l'on ne ralentit pas ainsi le site, même si c'est très marginal.


Certainement, mais nous avons tous des machines avec lesquelles certaines personnes passent des heures à jouer à de jeux vidéo: ça veut dire que la puissance des machines est colossale par rapport à ce que j'ai connu dans les années 1970.
A cette époque là, j'étais responsable du module télécommunication dans le développement d'un OS. Il y avait un type qui passait son temps à essayer de réduire la durée de traitement des modules traitant les évènements télécom. Le temps qu'il améliore la vitesse de son code par un facteur 2, la nouvelle version du hardware de la machine sur laquelle son code allait être livré avait une puissance de calcul 4 fois supérieure.
Ça ne veut pas dire qu’il ne faut pas se préoccuper des performances, mais -- sauf dans des cas très précis -- les performances en temps de calcul ne sont pas critique. Ce qui reste critique, ce sont les interactions avec les périphériques, et surtout les accès réseau.
Olivier C a écrit :
En css on peut même cibler par mots-clefs.

Pour un html :
&lt;div class="MaPremiereClef"&gt;Un texte&lt;/div&gt;
&lt;div class="MaDeuxiemeClef"&gt;Un texte&lt;/div&gt;

Le css pourra cibler les deux classes comme ceci :
[class*="Clef"] {
    color: red;
}


Je savais pas ! merci !
CAMEO172 a écrit :
Par ma simple curiosité, est-ce que ce genre de déclaration très générique n'impose pas énormément d'interprétation pour la navigateur ?

C'est l'essence même d'un navigateur d'interpréter les instructions qu'on lui envoie. Et pour répondre plus directement à la question le "coût" de ce calcul, s'il n'est pas nul, est vraiment négligeable.

D'ailleurs j'ai créé mon framework à partir de ce type de déclaration présent en grand nombre dans mon CSS comportant des centaines de lignes (un exemple de portion de cette feuille de style). Il vous suffit donc de parcourir le site et, s'il y a ralentissement, celui-ci sera plus imputable au serveur ou au téléchargement des ressources qu'à un calcul de l'affichage.
Sujet clos
Aller à