Specificity within a text string

Question

I like to think I am very skilled with specificity, but for some reason this one escapes me. Here's my conundrum:

Say you have a list like so:

<ul class="dates">
    <li><a href="#">1994/05</a></li>
    <li><a href="#">1999/05</a></li>
    <li><a href="#">2001/05</a></li>
    <li><a href="#">2005/05</a></li>
    <li><a href="#">2014/05</a></li>            
</ul>

The css (style-wise, not specificity-wise) is kind of irrelevant here so I'll skip it. But basically, it looks like this:

My thing is, I want to target the "month section" which is the 05. I want it to be a couple of pixels smaller. These were my failed attempts. They may not even exist and you can laugh all you want, but it beats yelling at the computer for not doing what I want it to do lol.

Answer 1

You can use jQuery to wrap the month in a span element like this:

$('.dates > li > a').html(function(i,oldHTML){
  return oldHTML.replace(/[/](\d{1,2})/, "/<span class='month'>$1</span>");
});

Demo.

Answer 2

Try this:

<ul class="dates">
        <li><a href="#"><span class="year">1994/</span><span class="month">05</span></a></li>
        <li><a href="#"><span class="year">1999/</span><span class="month">05</span></a></li>
        <li><a href="#"><span class="year">2001/</span><span class="month">05</span></a></li>
        <li><a href="#"><span class="year">2005/</span><span class="month">05</span></a></li>
        <li><a href="#"><span class="year">2014/</span><span class="month">05</span></a></li>            
    </ul>

    <style>
    .year {
    font-size: 12px;
    }

    .month {
    font-size: 10px;
    }
    </style>

Answer 3

use additional <span> with extra class to solve this.

HTML

<ul class="dates">
  <li><a href="#">1994/<span class="text-small">05</span></a></li>
  <li><a href="#">1999/<span class="text-small">05</span></a></li>
  <li><a href="#">2001/<span class="text-small">05</span></a></li>
  <li><a href="#">2005/<span class="text-small">05</span></a></li>
  <li><a href="#">2014/<span class="text-small">05</span></a></li>            
</ul>

CSS

.text-small {
  font-size: 10px
}

RESULT

DEMO