CSS Font-Size Classes not Working

Question

This is probably something VERY embarrasing; however it's been bugging me for a while.

In the example below, why are the font sizes not getting applied to the text?

.1px {
  font-size: 1px;
}
.100px {
  font-size: 100px;
}

<p class="1px"> Hello, world. </p>
<p class="100px"> Hello, world. </p>

No, I'm not using bootstrap, let alone any plugin overwriting the font-size.

EDIT: Thanks for the replies, I called it would be embarrasing.

Welcome to Stack Overflow! You can take the [tour] first and learn [ask] a good question and create a [mcve]. That makes it easier for us to help you. — Katie, Dec 02 '16 at 13:40
Try making the font-size `!important` or post some code so we can locate the problem if that doesn't work — , Dec 02 '16 at 13:40

score 2 · Accepted Answer · edited Dec 02 '16 at 14:07

2

You can target class names starting with a digit by using a css attribute selector.

Example:

[class="12px"] { font-size: 12px; }
[class="100px"]  {font-size: 100px; }

<p class="12px"> Hello, world. </p>
<p class="100px"> Hello, world. </p>

edited Dec 02 '16 at 14:07

Andrew Mairose

10,615
12
60
102

answered Dec 02 '16 at 14:03

VilleKoo

2,827
2
14
23

score 0 · Answer 2 · answered Dec 02 '16 at 13:54

Use this in place of 1px, 2px--- 100px as class not start of digit.

   <style>
    .one{
      font-size: 1px;
    }
    ---
    ---
    ----
    .hundred {
      font-size: 100px;
    }
    </style>

    <p class="one"> Hello, world. </p>
    <p class="hundred"> Hello, world. </p>

score 0 · Answer 3 · answered Dec 02 '16 at 15:07

0

In addition to starting the class name with a digit, some browsers impose a minimum font size that is then controllable by the user.

answered Dec 02 '16 at 15:07

R Reveley

1,547
3
14
33

pradeep1991singh · Answer 4 · 2016-12-02T15:21:51.027

CSS Class selector and ID selector starting with a number is not valid.

Characters and case

But still you can work-around this. There is two way to achieve this first is attribute selector:

/* attribute selector */
[class="12px"] {
    font-size: 12px;
}

Other is unicode selector:

/* or unicode selector */
.\31 00px {
  font-size: 100px;
}

/* attribute selector */
[class="12px"] {
  font-size: 12px;
}

/* or unicode selector */
.\31 00px {
  font-size: 100px;
}

<p class="12px"> Hello, world. </p>
<p class="100px"> Hello, world. </p>

Note: If going the attribute selector route, be aware that it only works down to IE7. If you need to support older browsers than that you have my sympathies (you can still use the unicode selectors).

CSS Font-Size Classes not Working

4 Answers4