سؤال

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.

هل كانت مفيدة؟

المحلول

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.

نصائح أخرى

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>

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

enter image description here

DEMO

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top