CSS class doesn't hide content inside div

Question

I wrote this css code:

body.product.70 div.mydiv {
display:none
}

and the HTML:

<body class="product 70">
    <div class="mydiv">
       content
    </div>
</body>

But it doesn't want to hide. thanks

"70" is not a valid CSS class name. See this answer: http://stackoverflow.com/a/449000/771834 — Étienne Després, Apr 11 '13 at 17:37

The Vanilla Thrilla · Accepted Answer · 2013-04-12T11:06:19.427

5

Well for starters, your class attribute is missing a closing quote...

EDIT: Aside from that, you're applying two class names, one of which is 70. This is NOT a valid CSS class name. CSS classes must begin with a hyphen, underscore, or letter.

edited Apr 12 '13 at 11:06

answered Apr 11 '13 at 17:36

The Vanilla Thrilla

1,915
10
30
49

As stated above, your class name must start with a `-`, `_`, or a letter. `70` is not a valid class name. Could you simply have a single css class called "product70" ? – The Vanilla Thrilla Apr 11 '13 at 17:41
something like: ? I have css class called only "product" and some with "product categoryID" (where the categoryID is the number) – Roberto C. Apr 11 '13 at 17:44
You might want to edit your answer, otherwise the upvotes and accept don't really make sense. – BoltClock Apr 12 '13 at 04:45

score 1 · Answer 2 · answered Apr 11 '13 at 17:38

1

<body class="product 70">
    <div class="mydiv">
       content
    </div>
</body>

.product .mydiv {
display:none
}

answered Apr 11 '13 at 17:38

Lowkase

5,631
2
30
48

score 0 · Answer 3 · answered Apr 11 '13 at 17:48

Classes can start with a number, but in order for those classes to be readable, the first number needs to be escaped, which apparently is \3# followed by a space, in this case:

body.product.\37 0 div.mydiv {
    display:none
}

Here's the fiddle: http://jsfiddle.net/FaruC/

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft") -- http://www.w3.org/TR/CSS21/grammar.html

score 0 · Answer 4 · answered Apr 11 '13 at 17:50

You don't need to specify too many classes when you call it on css. If you have the class .product for every product, no need to use the class '70' on the css:

body.product {
    display:none;
}

I recomend you to use something more semantic html like:

<body>
    <div class="product">
        <div class="mydiv">
            Hello
        </div>   
    </div>
</body>

And finally the css code:

.product{
    display:none;
}

I recomend to you that not use only numbers on the classes names. Maybe a single letter followed by a number it'd be more explicative for the developer :)

score 0 · Answer 5 · answered Apr 11 '13 at 18:06

First of all 70 is not a valid class name.

Instead of giving class to your body. Give it an ID as mentioned here

There are few ways with which you can achieve what you want

directly give the class the attribute of display none

.mydiv{
display:none;
}

Or if you are going to have multiple such class. Specify that only the class within .product class should get this style attribute

.product .mydiv{
display:none;
}
OR
body.product .mydiv{
display:none;
}

CSS class doesn't hide content inside div

5 Answers5