13

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?

Jck
  • 133
  • 1
  • 1
  • 4
  • class should not start with a number – ajbee Jul 25 '17 at 03:45
  • Possible duplicate of [Is there a workaround to make CSS classes with names that start with numbers valid?](https://stackoverflow.com/questions/21227702/is-there-a-workaround-to-make-css-classes-with-names-that-start-with-numbers-val) –  Jul 25 '17 at 03:48

3 Answers3

21

For classes starting with numbers, you'll need to write

.\32 00-200 {
  width: 200px;
  height: 200px;
}

You'll probably want to avoid doing that.

The \32 represents the digit "2". The space following it is necessary to terminate the escape sequence.

The reason for this is that "CSS identifiers" may not start with numbers. In CSS, class names used in selectors are considered "CSS identifiers". Therefore, the leading number must be escaped in the way shown above. Note that there is no restriction from the HTML perspective on class names, other than they may not contain spaces. So you could write <div class="%^*+&lt;", as long as you were willing to figure out how to write that in escaped form in your CSS file.

See the question suggested as a duplicate for more information.

14

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

patrick
  • 11,519
  • 8
  • 71
  • 80
  • 3
    Clever! Attribute selectors are [said to have worse performance](https://csswizardry.com/2011/09/writing-efficient-css-selectors/) than class selectors, but it's probably negligible and the CSS is certainly more readable than with an escaped first character. – Kal Jan 26 '21 at 04:25
2

CSS class names should not begin with a number (unless you're willing to do what @torazaburo's answer describes). So perhaps change that, i.e. the class name from "200-200" to "s200-200".

.200 {
  color: red;
}
.s200 {
  color: red;
}
<div class="200">I'm not red :(</div>
<div class="s200">I am red :)</div>
Bilal Akil
  • 4,716
  • 5
  • 32
  • 52