Unable to change text color of Bootstrap h1 using identifier selector?
First, here are some 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>
h1assigned the identifier "1-title", and therefore the text color h1should be blue, but it remains black even if I use !important.
However, I tried to add a class and apply the style to it as follows:
<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? Why can't I change color using the d selector?
, id . HTML-.
IDs and NAMEs must begin with a letter ([A-Za-z]) and can be followed by any number of letters, numbers ([0-9]), hyphen ("-"), underscore ("_"), colons (":") and periods (".").
For more information see the link below.
Why can't I have a numerical value as an identifier for an element?