CSS class is not applying to div

Question

Here is my code with class .1-html and div

CSS:

.1-html {
    height: 200px;
    width: 200px;
    border: 1px solid #000;
}

HTML:

<div class="1-html">
</div>

https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors — Albin Paul, Nov 11 '17 at 07:29
Possible duplicate of [Which characters are valid in CSS class names/selectors?](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) — silverFoxA, Nov 11 '17 at 07:43
You should read first "[How to Ask](https://stackoverflow.com/help/how-to-ask)" — lwinkyawmyat, Nov 11 '17 at 07:52
@Killer Johan I posted a correct solution to your problem , did that work for you ? — Sagar, Nov 12 '17 at 10:53

Mohammed Abrar Ahmed · Answer 1 · 2017-11-11T11:07:32.690

4

A name should begin with an underscore (_), a hyphen (-) or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. if the first character is a hyphen, the second character must be a letter or underscore, and the name must be at least 2 characters long.

Checkout details at How to name a css class and css selectors

Below code should work or check here.

CSS:

.html-1 {
    height: 200px;
    width: 200px;
    border: 1px solid #000;
}

HTML:

<div class="html-1">
</div>

If you want to use number at the starting of the class name then follow the code below or check here:

CSS:

[class="1html"] {
    height: 200px;
    width: 200px;
    border: 1px solid #000;
}

HTML:

<div class="1html">
</div>

edited Nov 11 '17 at 11:07

answered Nov 11 '17 at 08:12

Mohammed Abrar Ahmed

1,775
1
11
27

Thanks for the information about hyphen thingy. Just a small **correction**: if the first character is a hyphen, the second character must be a letter, *hyphen* or underscore. Essentially, if CSS class name is beginning with hyphen then a digit can't be the second character. – RBT Nov 11 '17 at 08:17
So `--h` is a valid CSS class name. – RBT Nov 11 '17 at 08:23
Yes! --h is valid CSS class name – Mohammed Abrar Ahmed Nov 11 '17 at 08:24
1

you can use names starting with number for classes in css , you just need to modify just a bit of how to use the class – Sagar Nov 11 '17 at 09:17
@SagarBhattacharya updated the answer for the classes starting with number. – Mohammed Abrar Ahmed Nov 11 '17 at 11:08
@SagarBhattacharya made it work but to do things that way is still invalid HTML. Never, EVER do this! – Rob Nov 12 '17 at 00:28

score 1 · Answer 2 · edited Nov 12 '17 at 00:16

1

Names starting with number are invalid in CSS so you need to escape the number.

Try this block of code , it's working in my browser

<html>
<head>
<meta charset = "UTF-8" lang="en">
<style>

    [class="1-html"]  {
    height: 200px;
    width: 200px;
    border: 1px solid #000;
}
</style>
</head>
<body>
<div class="1-html">

</div>

</body>
</html>

edited Nov 12 '17 at 00:16

RBT

18,275
13
127
181

answered Nov 11 '17 at 07:24

Sagar

409
2
8

This doesn't seem to be working. I tried it. I also tried `className` with both `"\1-html"` and `"1-html"` after making the changes suggested by you but it has no effect. Black border isn't appearing for the div. – RBT Nov 11 '17 at 08:10
then you can use this [class="1-html"] {/*your style*/} . I have modified the answer you can re-try it and added my browser screenshot with updated code – Sagar Nov 11 '17 at 09:16
Yep. Your updated answer works. I've updated your answer to reflect the correct part. – RBT Nov 12 '17 at 00:15
It doesn't matter that you got it to "work". Invalid HTML is still invalid HTML and shouldn't be used at all! Browsers are required to do the best they can with broken and invalid markup. – Rob Nov 12 '17 at 00:23
1

@Rob even if it is invalid but we need to have a fix , for example if someone has to have the class name starting with number because of their backend api or some dynamic content which is the basis of their html structure there need to have some workaround – Sagar Nov 12 '17 at 10:52
Invalid HTML is an **error**! Having errors in markup is a blunder! Anything used to fix it is a hack! It's undefined and has unpredictable, unreliable behavior! You should be embarrassed and not trying to find excuses. I hope you don't build airplanes. – Rob Nov 12 '17 at 13:23

CSS class is not applying to div

2 Answers2