Cannot style element inside div?

Question

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"

score 2 · Answer 1 · answered Jan 23 '18 at 13:35

2

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 ?

answered Jan 23 '18 at 13:35

It actually has nothing do to with html specs. It's css that's the issue. HTML5 removed that restriction with numbers. – Dan Weber Jan 23 '18 at 13:44

Dan Weber · Accepted Answer · 2018-01-23T19:51:28.993

1

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>

edited Jan 23 '18 at 19:51

answered Jan 23 '18 at 13:39

Dan Weber

1,217
1
11
22

Nope. You could using id="div-1" though. Are you not able to add text before the numbers? – Dan Weber Jan 23 '18 at 13:47
If I use` #one .match .team1 .team2{ background-color: yellow; }` it does not work why so ? – stone rock Jan 23 '18 at 13:50
Because those elements don't match the hierarchy. See my edited snippet above. – Dan Weber Jan 23 '18 at 13:52
I could not understand why `#one .match, #one .team1, #one .team2 {}` and why not `#one .match .team1 .team2 ` because team1 team2 and match class all are inside div="one"? – stone rock Jan 23 '18 at 13:59
1

See this for reference: https://stackoverflow.com/questions/4357211/multiple-classes-in-css-selector – Dan Weber Jan 23 '18 at 14:02
1

First one that works is saying element with class of match that is in element with id of one, same for team 1 and team 2. The one that doesn't work is saying style all elements that are in element with class of team2 within element with class of team1 within element with class of match within id of one. So would have to have html structure of div#one > div.match > div.team1 > div.team2 to match yours. – Dan Weber Jan 23 '18 at 14:06

CodeZombie · Answer 3 · 2018-01-23T13:55:38.087

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>

Cannot style element inside div?

3 Answers3