How to refer to a child class CSS

Question

I have this structure:

<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>

How can I refer to the class s--plus from the article class 48?

I tried with: .48 .s--plus but it doesn't work

in css you cant write a class starting with `number` it will not work — Vitorino fernandes, Jul 31 '15 at 07:26
is not semantic right, or not sure if even valid to name classes with just a number. try s48 instead or something like that. And preferable one dash instead of two. Refer with something like .s48 .s-plus — Medda86, Jul 31 '15 at 07:27
@Medda86 The two dashs is most likely BEM syntax http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ — Curt, Jul 31 '15 at 07:52

Curt · Accepted Answer · 2015-07-31T09:37:15.120

6

Class names shouldn't begin with a number.

Try changing this to media-48 or something similar.

Alternatively you could set it as a data-attribute:

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

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

edited Jul 31 '15 at 09:37

answered Jul 31 '15 at 07:25

Curt

94,964
60
257
340

As of HTML5, there are "no restrictions to which characters can be used in class names". http://www.w3.org/html/wg/drafts/html/master/dom.html#classes Meaning it can very well start with a number. For instance, `div class="10"` would be written in CSS as `[class="10"] {color: red;}` – Bram Vanroy Jul 31 '15 at 07:30
Marius' answer [here](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names-selectors?rq=1) and Bennett's comment provide a way to handle this. `.\34 8 .s--plus` works :) – Harry Jul 31 '15 at 07:32
@Harry your answer worked, if you post it i'll accept it! thanks :) – LS_ Jul 31 '15 at 07:36
2

@Signo: It would be a stolen idea, there is nothing that I can add to it too and so not posting. You could consider voting the contents on the linked thread :) Personally, I too wouldn't prefer using numbers as class names though. – Harry Jul 31 '15 at 07:38
1

@Harry ok I will! Thanks a lot anyways! :) – LS_ Jul 31 '15 at 07:39
@BramVanroy but this is not HTML5, this is a CSS problem. You can put values with tildes if you want, but is a bad practice. In css, if you need to put [class="xxx"] and this selectors in the class attribute is because you don't use good praxis. – Marcos Pérez Gude Jul 31 '15 at 07:41
@MarcosPérezGude Errr, no, it is isn't bad practice. And it *is* HTML. In HTML4, you can't use numbers as classes. It wouldn't be recognised as a className so you wouldn't be able to target it. In HTML5, however, you can. It was *made exactly for this purpose* so there is not a single bad practice thing about it. – Bram Vanroy Jul 31 '15 at 07:44
1

@BramVanroy Not using numbers for class names seems cleaner though. Would you change all CSS class selectors to an attribute selector? Otherwise it would be inconsistent. It seems like a workaround for an issue which could be easily solved by prepending text. Furthermore I think a number as a class name regardless is bad practice. What does it mean? What is its purpose? How would I future developer know whether an element should have class `48` assigned to it. – Curt Jul 31 '15 at 07:47
@Curt Of course, I agree. I am just saying that it is allowed in HTML5 and that it isn't bad practice at all. It has been implemented in spec exactly for this reason. It might not be the best way to deal with things, but that doesn't mean it is bad practice. I suppose grid builders and other people have their reasons to use numeric values. – Bram Vanroy Jul 31 '15 at 07:51
1

@Curt I am according to you. It is a workaround to fix an issue. With HTML5 we can write custom data-* attributes for this purpose. Write classes whos name is only a number doesn't make sense. Why? For What? There are so many questions about it. I think that HTML5 allows us to make it, but allows us to make it with another techniques cleanest and better – Marcos Pérez Gude Jul 31 '15 at 07:52
@BramVanroy Can you please provide citation for this feature being added for exactly this purpose? It seems like a by-product to me. – Curt Jul 31 '15 at 07:53
1

@Curt: I agree with you 100 percent but I think HTML5 introduced it to support class names starting with a number, for example 24columns would still be meaningful. – Harry Jul 31 '15 at 07:53
@BramVanroy grid developers has techniques to workaround this. With a first letter prepending the number they can make it better. If developer has 5 classes simultaneous and one of them is only a number, the specific selector is a mind-breaking, or a developer-dying. – Marcos Pérez Gude Jul 31 '15 at 07:54
@Harry Do you have a reference for HTML5 introducing this for this purpose or is this an assumption? – Curt Jul 31 '15 at 07:56
@Curt: Right now it is just an assumption based on Oriol's comment in the thread that I linked earlier. – Harry Jul 31 '15 at 07:58
@Curt As so many things in programming it isn't built exactly *for this purpose*, rather, it serves the goal that HTML5 aimed for: make HTML more flexible and adjustable to the needs of the dev *whatever they may be*. Don't try to find a reason why this is possible in HTML5. Just be grateful that we can. I do not believe, however, that this is a by-product. I wouldn't know how. If the spec devs didn't want us to use this, they wouldn't have implemented it. – Bram Vanroy Jul 31 '15 at 08:06
agree with Bram. And that is called UPDATION or else we will follow the same rules from ageis that dn't use number this that. If we won't change then some one else change and it depends on you that you want to accept or want to stick to old things. depends on you but don't be rude if other are using. Everyone have their own mind, dnt try to rule if you have high repo. – Leo the lion Jul 31 '15 at 08:18
@Leothelion From what I can see, he's trying to help and advise people which is what this website is for. Stop being so aggressive. – Largoh Jul 31 '15 at 09:21
@Largoh, its not called being aggressive but it is called show off. I got what op asked. and i showd by example too. i too correct one person by commenting and he changed but helping and showing is totally different. Please read entire comments and mine too then hope you will see. – Leo the lion Jul 31 '15 at 09:24
@Leothelion Please don't take down-votes personally, they're constructive. – Curt Jul 31 '15 at 09:34
@Curt i did not. but your first line in BOLD LETTER that Class names cannot begin with a numbe and then arguing when people already gave you working example so please don't act to live in ageis. Read back thanx. – Leo the lion Jul 31 '15 at 09:36
I also did...Cheers. but one advise accept the change.go with flow of time, not to stick with stones. – Leo the lion Jul 31 '15 at 09:39
@Leothelion I stand by my point. `48` is not a constructive class name, it's meaningless. Regardless of whether it's technically possible to use it, I would avoid it. – Curt Jul 31 '15 at 09:43
wait for some time and then you will also start using it when there will be reason so just wait. – Leo the lion Jul 31 '15 at 10:11

score 1 · Answer 2 · answered Jul 31 '15 at 07:45

1

You can escape first digit converting it to Unicode:

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

Or target class attribute

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

demo fiddle

answered Jul 31 '15 at 07:45

Bogdan Kuštan

4,901
1
16
29

score 0 · Answer 3 · answered Jul 31 '15 at 07:28

0

Class names can't start with a number. It's the same as a variable. You can put it in a data-* attribute or prepend a word:

  <tag class="media prepend48">

OR

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

answered Jul 31 '15 at 07:28

Marcos Pérez Gude

20,206
4
34
65

score 0 · Answer 4 · answered Jul 31 '15 at 07:30

0

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

You have class 48. Class names cannot begin with a number. Try changing it to letters

answered Jul 31 '15 at 07:30

Daan

613
8
21

Jonathan La'Fey · Answer 5 · 2015-07-31T07:31:56.327

-2

Updated didn't saw where <a> ended

You could try

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

edited Jul 31 '15 at 07:31

answered Jul 31 '15 at 07:26

Jonathan La'Fey

518
6
11

This would select articles which don't have the 48 class also, it's not the selector the OP is after. – Curt Jul 31 '15 at 07:49

How to refer to a child class CSS

5 Answers5