How to target only numbers in a list containing both numbers and alphabets?

Question

Here is my list items:

<ul class="col2">
   <li>from $400</li>
   <li>from $1000</li>
   <li>sold out</li>
   <li>from $1400</li>
</ul>

Now what i want is that i want to format all the numbers ($200,$1000 and $1400) to the following: Droid Serif, bold, 36px, #1c1819

and the words(from and sold out) to the following: open sans, bold, 22px, #726850

Is there a way i can do it?

Answer 1

With only HTML and CSS you will need an extra element, in this case I would recommend to use a <span>:

.col2 li {
  font: bold 22px"open sans";
  color: #726850;
}
.col2 li span {
  font: bold 36px"Droid serif";
  color: #1c1819
}

<ul class="col2">
  <li>from <span>$400</span></li>
  <li>from <span>$1000</span></li>
  <li>sold out</li>
  <li>from <span>$1400</span></li>
</ul>

Answer 2

Do you have access to the script that generates this html? The easiest way would be to add css classes accordingly and then set styling for them.