web-dev-qa-db-fra.com

Classe CSS IMG dans div et span

Bonjour, j'ai un code comme celui-ci:

<div class="123_test" tabindex="0" role="button">

    <span class="">
        <img class="" alt="" src="picturetopic"></img>        
    </span>
</div>

Comment puis-je styler cette img avec 123_test classe?

cssimagecss-selectors
9
Paweł Domański

Tout d'abord, vous ne pouvez pas commencer un nom de classe en utilisant un chiffre, je suppose qu'il est généré quelque part car les classes sont vides, mais si vous le pouvez, envisagez de le changer, comme

class="name_123_test"

Et utilisez le sélecteur ci-dessous comme

.name_123_test > span img {
   /* Styles goes here */
}

En CSS, les identificateurs (y compris les noms d'éléments, les classes et les identificateurs dans les sélecteurs .__) ne peuvent contenir que les caractères [a-zA-Z0-9] et ISO 10646 caractères U + 00A0 et supérieurs, plus le trait d'union (-) et le trait de soulignement (_); ils ne peuvent pas commencer par un chiffre, deux traits d'union ou un trait d'union suivi par un chiffre. Les identifiants peuvent également contenir des caractères d'échappement et n'importe quel Caractère ISO 10646 sous forme de code numérique (voir élément suivant). Par exemple, l'identifiant "B & W?" peut être écrit comme "B\& W \?" ou "B\26 W\3F".

Référence W3C

15
Mr. Alien

Pourquoi vos attributs class sont-ils vides?

Si vous souhaitez appliquer la classe 123_test à la balise img, ajoutez-la simplement dans l'attribut class:

<img class="123_test" alt="" src="picturetopic"></img>

Ou voulez-vous dire que vous voulez utiliser l'ancêtre div comme guide de style pour img? Dans votre CSS, vous pouvez référencer la img en tant que descendant de la classe 123_test:

.123_test img
{
    // css rules
}

L'espace entre les deux identifiants signifie que ce dernier est un descendant du premier.

1
David

Vous ne pouvez pas nommer une classe commençant par un chiffre. Changez donc le nom de votre classe en class="test_123" ou quelque chose qui ne commence pas par un nombre.

Et maintenant, vous pouvez styler votre img de cette façon:

.test_123 // here you put your class name after the "."
{
    // style your image here
}
0
Roman

De plus, utilisez un meilleur balisage HTML pour la fonctionnalité:

<button type="button" class="test_123" tabindex="0">    
    <span>
        <img alt="" src="picturetopic" />       
    </span>
</button>

Les boutons de type = "bouton" peuvent contenir du texte ou une image. Si l'image contient du texte, il est préférable d'utiliser css pour créer l'effet graphique de conformité aux directives d'accessibilité et l'afficher sur plusieurs périphériques.

0
Roralee