Comment se référer à une classe enfant CSS

J'ai cette structure:Comment se référer à une classe enfant CSS

<article class="media media--small 48"> 
    <a href="#"> 
    <img src="" class="media__img" alt=""> 
    <i class="s s--plus"></i></a> 
    <div class="media__body"> 
     <h1 class="media__title"></h1> 
     <p></p> 
     <div style="display: inline-block;"><a href="" target="_blank"><img src="" alt=""></a> <a href="" target="_blank"><img style="margin-left: 17px;" src="" alt=""></a></div> 
     <p></p> 
    </div> 
</article>

Comment puis-je référence à la classe s--plus de la classe article 48?

J'ai essayé avec: .48 .s--plus mais il ne fonctionne pas

Source

2015-07-31 Signo

css vous ne pouvez pas écrire une classe en commençant par 'number' cela ne fonctionnera pas –

n'est pas sémantique à droite, ou pas sûr si même valide pour nommer des classes avec juste un nombre. essayez s48 à la place ou quelque chose comme ça. Et préférable un tiret au lieu de deux. Référez-vous à quelque chose comme .s48 .s-plus – Medda86

@ Medda86 Les deux tirets est très probablement la syntaxe BEM http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ – Curt

Les noms de classe ne doit pas commencer par un nombre.

Essayez de changer cela en media-48 ou quelque chose de similaire.

Sinon, vous pouvez le définir comme un attribut de données:

<article class="media media--small" data-articleid="48"> 

article[data-articleid=48] .s--plus

Source

2015-07-31 07:25:09 Curt

Depuis HTML5, il n'y a "aucune restriction à l'utilisation des caractères dans les noms de classes". http://www.w3.org/html/wg/drafts/html/master/dom.html#classes Cela signifie qu'il peut très bien commencer par un nombre. Par exemple, 'div class =" 10 "' serait écrit en CSS comme '[class =" 10 "] {color: red;}' –

La réponse de Marius [ici] (http://stackoverflow.com/questions/ 448981/what-characters-are-valid-in-css-class-names-selectors? Rq = 1) et le commentaire de Bennett fournit un moyen de gérer cela. '. \ 34 8 .s - plus' fonctionne :) – Harry

@Harry votre réponse a fonctionné, si vous l'affichez je l'accepterai! merci :) – Signo

-2

Mise à jour n'a pas vu où <a> terminé

Vous pouvez essayer

article > a > .s--plus{ 
... 
}

Source

2015-07-31 07:26:35

son ne fonctionne pas.please test avant de poster réponse. –

Correction et maintenant il fonctionne –

Cela sélectionnerait les articles qui n'ont pas la classe 48 aussi, ce n'est pas le sélecteur que l'OP est après. – Curt

noms de classe peuvent » t commence par un nombre. C'est la même chose qu'une variable. Vous pouvez le mettre dans un attribut de Data- * ou préfixer un mot:

<tag class="media prepend48">

<tag class="media" data-custom="48">

Source

2015-07-31 07:28:27

<article class="media media--small 48">

Vous avez la classe 48. Les noms de classe ne peuvent pas commencer par un nombre. Essayez de changer à lettres

Source

2015-07-31 07:30:13 Daan

Vous pouvez échapper premier chiffre convertir en Unicode:

.\34 8 .s--plus { 
    background: blue; 
}

ou cible attribut class

article[class ~= "48"] .s--plus { 
    background: red;  
}

demo fiddle

Source

2015-07-31 07:45:49

Comment se référer à une classe enfant CSS

Répondre

Questions connexes