2

I might have been staring at the computer screen too long today and looked over something small but why can I not target these individual cells? (a1, a2, a3, etc...)

<div class="row-a">
    <div class="a">
        <div class="1"></div>
            sdf
    </div>
    <div class="a">
        <div class="2"></div>
    </div>
    <div class="a">
        <div class="3"></div>
    </div>
    <div class="a">
        <div class="4"></div>
    </div>
    <div class="a">
        <div class="5"></div>
    </div>
    <div class="a">
        <div class="6"></div>
    </div>
    <div class="a">
        <div class="7"></div>
    </div>
    <div class="a">
        <div class="8"></div>
    </div>
    <div class="a">
        <div class="9"></div>
    </div>
    <div class="a">
        <div class="10"></div>
    </div>
</div>

CSS: 

div.row-a div.a div.1 {
    border: 1px solid green;
    margin-left: 5px;
    margin-top: 5px;
    background-color:red;
    height: 50px;
    width: 50px;
}

jsFiddle: http://jsfiddle.net/tuHLE/

asedsami
  • 609
  • 7
  • 26
Chaddly
  • 267
  • 1
  • 6
  • 18

1 Answers1

8

You can't begin a class name with a digit, which is why your code is not working.

See Which characters are valid in CSS class names/selectors?.

Edit: Well, ok, not exactly. Technically, you can begin a class name with a digit. In fact, you can use almost anything as a class name (except NUL). However, if you use a class name that begins with a digit, you will have to escape it in your CSS. For example, to select your class="1" div, you could do the following:

.row-a .a .\31 {...}

See http://mathiasbynens.be/notes/css-escapes for more information.

Community
  • 1
  • 1
Derek Henderson
  • 9,388
  • 4
  • 42
  • 71
  • You (and others) were correct. Thank you for the help. I ended up changing the numbers to text (one, two, three, etc.) – Chaddly Jun 18 '13 at 18:00
  • 1
    You can also use an attribute selector, e.g. `[class="1"]{}` - it has to be quoted though – Adrift Jun 18 '13 at 19:58