CSS Style Not Recognizing Numbers

CSS style not recognizing numbers

If class & ID is start from number then is not recognized by css. But you can write like this .plans3 instead of .3plans.

As per W3c

In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z0-9] and ISO 10646
characters U+00A1 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, 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".

Check this discussion for more Which characters are valid in CSS class names/selectors?

CSS class starting with number is not getting applied

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.

Is there a reason why CSS doesn't support ids and classes, starting from numbers?

In fact, the specification states that classes starting with a number will be interpreted as a dimension [1]:

CSS2 parses a number immediately followed by an identifier as a DIMENSION token (i.e., an unknown unit), CSS1 parsed it as a number and an identifier. That means that in CSS1, the declaration 'font: 10pt/1.2serif' was correct, as was 'font: 10pt/12pt serif'; in CSS2, a space is required before "serif". (Some UAs accepted the first example, but not the second.)

and since we don't know which dimensions will be introduced in the future, dimensions that do not exist in CSS are parsed as unknown dimensions:

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft")

You can use class starting with numbers by escaping the first digit, which is valid according to the W3C CSS validator. check out the plunkr.

[1] Appendix G. Grammar of CSS 2.1

HTML ID with numerical value not recognized by CSS

Although it's allowed to set a class or id to begin with a digit in HTML5, but it's not allowed in CSS, see the spec:

HTML5: 3.2.5.1 The id attribute

... There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc. ...

---

CSS: 4.1.3 Characters and case

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

i.e.

<div id="1"> is valid HTML, but you cannot target it with #1 {...} in CSS.

However, you can use [id="1"] {...} or escape it #\31 {...}

styling with numbers for number formats using css

just use a CSS class for it or use inline style like this, here is the example:

  while($row = mysqli_fetch_array($em)){

        $amount = $row['amount'];
    
        $formated_number = number_format($amount, 0);

        echo '<span style="color:#000000;font-weight:bold;font-size:24px;">'.$formated_number.'</span>'
         }

Can you style ordered list numbers?

You can do this using CSS counters, in conjunction with the :before pseudo element:

 ol {   list-style: none;   counter-reset: item; } li {   counter-increment: item;   margin-bottom: 5px; } li:before {   margin-right: 10px;   content: counter(item);   background: lightblue;   border-radius: 100%;   color: white;   width: 1.2em;   text-align: center;   display: inline-block; }

<ol>  <li>item</li>  <li>item</li>  <li>item</li>  <li>item</li></ol>

HTML CSS Issues in implementing nested ordering which includes numbers, alphabets and roman numbers

You were wrong in the use of your :before and the list counter CSS property. Also you probably got lost in CSS selectors and ended up with undesired effects.

I fixed it for you, hopefully this is what you were looking for

li {  display: block}
.main-num-list, .sub-num-list {  counter-reset: item}
.main-num-list>li:before,.sub-num-list>li:before {  content: counters(item, ".") " ";  counter-increment: item}
.sub-albhabatical-list {  counter-reset: letter;}
.sub-albhabatical-list > li:before {  content: counter(letter, lower-alpha) ". ";  counter-increment: letter;}
.sub-roman-list {  counter-reset: roman;}
.sub-roman-list > li:before {  content: counter(letter, lower-roman) ". ";  counter-increment: roman;}

<div class="layout__wrapper">
  <ol class="main-num-list">
    <li>Main Line 111111111      <ol class="sub-num-list">        <li>Sub Line 111111111          <ol class="sub-albhabatical-list">            <li>CSS Style Not Recognizing Numbersaaa</li>            <li>bbb</li>          </ol>        </li>
      </ol>    </li>
    <li>Main Line 22222222      <ol class="sub-num-list">        <li>Sub Line 111111111          <ol class="sub-albhabatical-list">            <li>CSS Style Not Recognizing Numbersaaa</li>            <li>bbb</li>          </ol>        </li>        <li>Sub Line 22222222          <ol class="sub-albhabatical-list">            <li>CSS Style Not Recognizing Numbersaaa              <ol class="sub-roman-list">                <li>moreeeeee</li>                <li>moreeeeee</li>              </ol>            </li>            <li>bbb              <ol class="sub-roman-list">                <li>moreeeeee</li>                <li>moreeeeee</li>              </ol>            </li>          </ol>        </li>        <li>Sub Line 111111111          <ol class="sub-albhabatical-list">            <li>CSS Style Not Recognizing Numbersaaa</li>            <li>bbb</li>          </ol>        </li>      </ol>    </li>  </ol></div>

---

Related Topics