Search code examples
csscss-selectorscss-specificity

Specificity within a text string

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: enter image description here

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.

Solution

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