0

I have this html;

<div class="1"><br/>hi</div>
<div class="2"><br/>hi</div>
<div class="3"><br/>hi</div>
<div class="4"><br/>hi</div>

and then I added normal CSS formatting to the divs;

div{
    height: 100px;
    width: 100px;
    border-radius: 100%;
    margin: 20px;
    display: inline-block;
    text-align: center;
}

and then i wanted each div to be a different colour so I used the classes like this;

.1{
    background-color: pink;
}

.2{
    background-color: red;
}

.3{
    background-color: orange;
}

.4{
    background-color: yellow;
}

I am writing this in dreamweaver and when i click on the divs the little class thing tells me that they are coloured and the code is working, but when i preview in a browser the colours are not showing up and I just get the div part of the CSS. it's probably very obvious but I can't think of why this is happening. Thanks :)

thyme
  • 31
  • 1
  • 6
  • 3
    Because class name couldn't start with a number. – emmanuel Oct 11 '14 at 22:37
  • 2
    See also [What characters are valid in CSS class selectors?](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors) for a description of what is legal and what is not in CSS class names. – GolezTrol Oct 11 '14 at 22:39
  • haha thanks so much i didn't even think of that! – thyme Oct 11 '14 at 22:39

1 Answers1

0

Please avoid using classes with number at the beginning. It will fail for sure. You can use for example cl1, cl2, cl3, etc.

podwysoc
  • 41
  • 3