Giving an element a class based on the current page it's on?

Hi there,

I am a bit stuck with something here…

I have a website that I list competitions/contests on. I am wanting to create a page that will display all the listings I have added that day.

To do this I am creating a page called /new-competitions. At the top of this page, I have a scroll able calendar that looks like this:

This page will always have the current date on so “today’s” date will always have the .current-day class.

Each day I am going to save yesterday’s current page as the date of that day, for example: new-competitions-22-june-2020.

Now, what I want to do is give the date on that page a class so the user knows what day they are viewing… something like this:

I have set up the pages with this scroll-able calendar in an include, so I would like to ask the best way to add a class to the “current” page’s calendar day. What would be the best way to do this? Can I add a class based on the URL and somehow match it to the calendar day number?

This is my current code that displays the scroll-able calendar with the different days:

<div class="gallery js-flickity nc-items"
  data-flickity-options='{ "wrapAround": false, "autoPlay": false, "pageDots": false, "cellAlign": "left"}'>
	<div class="nc-item-start d-none d-md-block">
		<div class="nc-scroll">
			<span class="text-right">Scroll or swipe to select competitions added from a previous day</span>
			<div class="scroll-arrow-container">
				<div  id="scroll-arrow">
					<i class="fas fa-arrow-right"></i>
				</div>
			</div>
		</div>
	</div>
	<!-- CURRENT DAY -->
	<div class="nc-item current-day">
		<a href="/new-competitions">
			<div class="nc-date-month">JUN</div>
			<div class="nc-date-day">23</div>
		</a>
	</div>
	<!-- end CURRENT DAY -->
	<div class="nc-item">
		<a href="#">
			<div class="nc-date-month">JUN</div>
			<div class="nc-date-day">22</div>
		</a>
	</div>
	<div class="nc-item">
		<a href="#">
			<div class="nc-date-month">JUN</div>
			<div class="nc-date-day">21</div>
		</a>
	</div>
	<div class="nc-item">
		<a href="#">
			<div class="nc-date-month">JUN</div>
			<div class="nc-date-day">20</div>
		</a>
	</div>
	<div class="nc-item">
		<a href="#">
			<div class="nc-date-month">JUN</div>
			<div class="nc-date-day">19</div>
		</a>
	</div>
	<div class="nc-item">
		<a href="#">
			<div class="nc-date-month">JUN</div>
			<div class="nc-date-day">18</div>
		</a>
	</div>
	
</div>

Can anyone suggest the best way to do this?

Hope that makes sense?!

Thanks!

Is this page generated by some PHP code, or would it be better asked in the HTML and CSS section of the forum?

Its a WordPress page, but used just HTML/CSS. I was wondering if there is something in PHP that would ad the class to the date somehow?