The importance of precision in a written text

When it comes to being specific, I usually pride myself on my skills. However, there's one particular challenge that I can't seem to crack. Here's the scenario:

Imagine you have a list structured like this:

<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 specific CSS styling is not so important in this case, so let's skip over that. Essentially, it looks something like this:

Here's the thing – I want to target the "month section," which is always represented by 05. I'd like to make it slightly smaller than the rest of the text. I tried a few different approaches, but none of them seemed to work. They might even be non-existent, and you're welcome to poke fun at my attempts. At least it's better than getting frustrated with the computer for not cooperating, right? LOL.

csscss-selectorscss-specificity

Answer №1

To add a span element around the month using jQuery, you can utilize the following code snippet:

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

Check out the live demo here.

Answer №2

Give this a shot:

<ul class="event-dates">
        <li><a href="#"><span class="year">2002/</span><span class="month">07</span></a></li>
        <li><a href="#"><span class="year">2007/</span><span class="month">07</span></a></li>
        <li><a href="#"><span class="year">2011/</span><span class="month">07</span></a></li>
        <li><a href="#"><span class="year">2016/</span><span class="month">07</span></a></li>
        <li><a href="#"><span class="year">2020/</span><span class="month">07</span></a></li>            
    </ul>

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

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

Answer №3

To resolve this issue, incorporate an additional <span> element with a custom class.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

In my code, I am using a TimelineLite() to perform a series of sequential tweens with .to(). What I want to achieve is accessing the output value from one of the early tweens in order to use it for constructing later tweens. Is there any way to retrieve t ...

javascriptjquerycssanimationgsap

When it comes to using brackets and HTML, I keep receiving an error message indicating that there is no index file

I'm having trouble with this code - it works fine in Code Academy, but I am new to HTML and trying to practice outside of the platform. Every time I try to live preview in Brackets, I get an error message saying "make sure there is an html file or tha ...

htmlcss

An HTML/CSS component that dynamically adjusts its height at random intervals

My goal is to have the footer of my page occupy just one line in height. On occasion, when I open my page in a new browser tab, the footer ends up being two lines tall. However, if I simply reload the page within the same tab, everything appears as intende ...

csstwitter-bootstrap

Tips for dynamically retrieving a CSS file for an HTML page

With multiple html pages containing the same navbar, I made the decision to place the navbar in its own file called navbar.html and use ajax with jquery.get() to dynamically load it onto each page. This prevents redundant code across all pages. Currently, ...

htmlcssajax

Struggling to create a flawless gradient fade transition

Looking to create a gradient overlay on my images for a specific effect: The goal is to have the gradient darker at the bottom, while leaving the top unaffected by the darkness. I attempted the following code: @include linear-gradient(to top, rgba(0,0,0 ...

csslinear-gradients

Ways to display a vertical scrollbar within a select box

I'm currently working with an Angular select box and I'm looking to display a scroll bar if there are more than 5 data entries. <select class="form-control" data-ng-model='projectListData.appVersion' ng-selected ng-options="v.versio ...

jqueryangularjshtmlcss

Guide to create a sliding menu transition from the viewport to the header

I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...

javascriptjqueryhtmlcss

What is the best way to modify the underline style of a tab in Material UI?

I'm trying to customize the underline of: https://i.stack.imgur.com/J2R1z.png Currently, I am using material ui version 4.12.3 The code snippet for generating my tabs is below: function renderTabs(): JSX.Element { return ( <Tabs className={cla ...

cssreactjstypescriptmaterial-ui

Troubleshooting the problem of fast rotation and scrolling of text in the middle but slow movement at the end with

Currently, I am utilizing the jquery animate function for animating text while also aiming to rotate the text if a specific degree is passed. In order to achieve this, I have implemented the following code snippet: var leftCss = "-"+$('#mydiv'). ...

javascriptjqueryioscssanimation

Tips for adjusting the font size on the Google Maps mapType controller

Is it possible to adjust the font size of a Google Maps mapType controller using HTML or CSS? I've managed to change the size of the controller, but struggling with the font size. HTML: <div #map id="map" style="height:250px;"></div> C ...

htmlcssgoogle-maps

Applying the document height to window height ratio to create a scale ranging from 1 to 100

My goal is to create a scroll bar using two divs with heights of 110px and 10px. The smaller one will be nested inside the taller one, allowing for adjustment of its margin-height from 0 to 100px while still fitting within the larger div. When I refer to ...

javascriptjquerycss

Creating column gaps that remain consistent when resizing a webpage is essential for maintaining a clean and organized layout

Visit my current site [This is the HTML code for my website:][2] <div class="column-box" style="width: 100%"></div> <div id="column1" style="float:left; margin:15; width:33%;"> <p>Sara Adams<br> I am a Web Developer and C ...

htmlcss

Manipulating CSS animations through JQuery

Currently, my animation is triggered by a :hover event. However, I would like to change it so that the animation starts when a button is clicked. Can someone guide me on how to manipulate the CSS using JQuery? //CSS .mouth{ top: 268px; left: 273px; ...

javascriptjquerycss

Ensuring the Angular Material bottom sheet (popover) stays attached to the button

Recently, I've been working on an Angular project where I successfully integrated a bottom sheet from Angular Material. However, I encountered an issue when trying to make the opened popup sticky to the bottom and responsive to its position, but unfor ...

cssangularsassangular-material

What is the method for modifying the text color of P tags within a div element?

I'm having trouble changing the text color of the P tags in the card-header section for some reason dashboard.html <div class="container"> <div class="card"> <div class="card-header"> <p& ...

htmlcss

Performing a search using the ID attribute in Selenium with C# leads to the utilization of the Css

Okay, so I have this DIV that I am trying to access: <div id="FromTitle" [something,something]> My code for accessing it looks like this: var searchID = "FromTitle"; //some other code that successfully finds elements driver.FindE ...

c#seleniumselenium-webdrivercss-selectors

Is it feasible to generate a fixed lighting effect overlay with HTML and CSS?

Is it possible to incorporate a static lighting effect overlay using HTML/CSS? My project consists of an HTML5/JS app with a top navigation bar and a series of cards that are transitioned through using swipe gestures. These cards are displayed in gray ove ...

javascripthtmlcss

first item's grandchild selection

https://jsfiddle.net/jg69c3yf/1/ I don't have a lot of experience with CSS. My goal is to target the div with the class arrow-right, but only if it's inside the first child of a div with the class active. In this sample code, Only item 3 shoul ...

htmlcss

Position the button at the corner of the textarea

How can I position two buttons below a text_area, aligned with the bottom right corner of the text area? Here is what I have tried so far: Current code snippet: form with modal <%= form_for @note, :url => registrant_notes_path(@registrant), remote: ...

htmlcssruby-on-rails

Customize Swiper js: How to adjust the Gap Size Between Slides using rem, em, or %?

Is there a way to adjust the spacing between slides in Swiper js using relative units such as 2rem? The entire page is designed with relative units. All measurements are set in rem, which adjusts based on the viewport size for optimal adaptability. For i ...

javascriptcssswiper.js