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

[toolman]

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!

[droopsnoot]

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

[toolman]

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?