CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
stone rock
stone rock

Reputation: 1953

Cannot style element inside div?

I want to style div with id="1" which contains class="match" code:

<div class="col-lg-3">
    <div id="1">
        <p class="match">Match {this.state.matches[0].id}</p>
        <div class="team1">
            <h4>{this.state.matches[0].team1}</h4>
        </div>
        <div><h3 align="center">VS</h3></div>
        <div class="team2">
            <h4>{this.state.matches[1].team2}</h4>
        </div>
     </div>
 </div>

Whenever I use below code:

.match{
    background-color: yellow;
}

But when I style it like below it does not work why:

#1 .match{
    background-color: yellow;
}

I have multiple div with id=1,2,3,.. each having class="match"

Upvotes: 0

Views: 64

Answers (3)

Dan Weber
Dan Weber

Reputation: 1237

Having a class or id that begins with a number works in html5, but it's not a valid css selector.

Even though HTML5 is quite happy for an ID to start with a number, CSS is not. CSS simply doesn’t allow selectors to begin with a number.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”. - W3C Specification

.match{
    background-color: yellow;
}

#one .match{
    background-color: red;
}

#one .match, #one .team1, #one .team2{ color: green; }
<div class="col-lg-3">
     <div id="one">
          <p class="match">Match Test 1</p>
           <div class="team1">
                <h4>Team 1</h4>
           </div>
           <div><h3 align="center">VS</h3></div>
           <div class="team2">
               <h4>Team 2</h4>
           </div>
     </div>
 </div>

Upvotes: 1

CodeZombie
CodeZombie

Reputation: 2087

Do not use numbers as an id.

#matchScore .match{
    background-color: yellow;
}
<div class="col-lg-3">
     <div id="matchScore">
        <p class="match">Match {this.state.matches[0].id}</p>
        <div class="team1">
            <h4>{this.state.matches[0].team1}</h4>
        </div>
        <div><h3 align="center">VS</h3></div>
        <div class="team2">
            <h4>{this.state.matches[1].team2}</h4>
        </div>
     </div>
</div>

Upvotes: 1

user4676340
user4676340

Reputation:

Depending on your version of HTML,

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 (".").

This is for HTML4. HTML5 Should allow you to use numbers first though. Try using a non-number ID ?

Upvotes: 2

Related Questions