What is wrong with this css targeting? [duplicate]

Question

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/

Your class names may be valid in HTML5, but that doesn't make them valid in CSS. — dsgriffin
– dsgriffin, Commented Jun 18, 2013 at 17:13

Community · Accepted Answer · 2017-05-23 12:33:58Z

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.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jun 18, 2013 at 17:12

Derek Henderson

9,7364 gold badges46 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chaddly Over a year ago

You (and others) were correct. Thank you for the help. I ended up changing the numbers to text (one, two, three, etc.)

Adrift Over a year ago

You can also use an attribute selector, e.g. [class="1"]{} - it has to be quoted though

Collectives™ on Stack Overflow

What is wrong with this css targeting? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related