Can't change Bootstrap h1 text colour using id selector?

Question

At first, here is the relevant parts of the code:

<head>
<style type="text/css">
#part1 {
    background: url("1.jpg") no-repeat center;
    background-size: cover;
}
#1-title {
    color: blue;
}
</style>
</head>

<body>
<div class="jumbotron jumbotron-fluid" id="part1">
    <div class="container">
        <h1 id="1-title" class="display-3">The New App</h1>
        <p class="lead" id="1-disc">A new app</p>
        <hr class="my-4">
    </div>
</div>
</body>

h1 is assigned an id of "1-title", and hence h1 text colour should be blue, but it remains black even if I use !important.

However, I tried adding a class and applying the style to it as following:

<style type="text/css">
#part1 {
    background: url("1.jpg") no-repeat center;
    background-size: cover;
}
.c {
    color: blue;
}
</style>

and:

<h1 class="display-3 c">The New App</h1>

and it worked.

So what is the reason of that? Why can't I change the colour using the d selector?

Check this [link](https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute) — Prasath V, Feb 25 '17 at 07:07

score 3 · Accepted Answer · answered Feb 25 '17 at 07:01

3

The ID selector isn't working because an ID can't start with a number. Either change the ID to a letter or use the attribute selector [id='1-title'] {...}

answered Feb 25 '17 at 07:01

Michael Coker

52,626
5
64
64

score 3 · Answer 2 · answered Feb 25 '17 at 07:22

All the answers are correct but I am writing this answer for somebody who must have a id starting with a number This can be done in two ways---

no.1

You can use Michael Coker's answer--

[id='1-title'] {...}

no.2

but for this the support is till IE7 So if you are among those unlucky one's who needs to support older IEs, you need to use unicodes like this--

#\31-title {...}

Hope this helps future readers!

score 2 · Answer 3 · answered Feb 25 '17 at 07:04

As of HTML5, the only restrictions on the value of an ID are:

must be unique in the document must not contain any space characters must contain at least one character Similar rules apply to classes (except for the uniqueness, of course).

So the value can be all digits, just one digit, just punctuation characters, include special characters, whatever. Just no whitespace. This is very different from HTML4.

In HTML 4, ID values must begin with a letter, which can then be followed only by letters, digits, hyphens, underscores, colons and periods.

In HTML5 these are valid:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

Just bear in mind that using numbers, punctuation or special characters in the value of an ID may cause trouble in other contexts (e.g., CSS, JavaScript, regex).

score 1 · Answer 4 · answered Feb 25 '17 at 07:01

1

It is because id or class name cannot start with number.

answered Feb 25 '17 at 07:01

user31782

7,087
14
68
143

score 1 · Answer 5 · edited May 23 '17 at 12:32

This is because an id selector cannot start with a number. Please read the rules for creating an id for HTML tags.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Refer to the link below to gain more insight.

Why can't I have a numeric value as the ID of an element?

Can't change Bootstrap h1 text colour using id selector?

5 Answers5