CSS class starting with number is not getting applied

user_7776412 0
Viewed 12959

I'm trying to create a webpage that contains images. However, I want all the images to be the same size and in the same format. I have the following CSS class which applies to a div and centers and sizes the image:

.img-container {
    border: thin solid #C4C4C4;
    border-radius: 10px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

However, my images will have different dimensions throughout the page. Thus I want to have separate classes for just height and width, like so:

.200-200 {
    width: 200px;
    height: 200px;
}

When I apply both of these classes to the div as follows:

<div class="img-container 200-200"><img></div>

the height and width don't seem to apply. Is there anything I can do to have these classes separated?

css html
4 Answers

Another very useful notation is this:

[class="200"]{
  width: 200px;
  height: 200px;
}

W3C specifications however state:

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”.

So you might want to consider rethinking your class names instead

user_4638130
Related