how can we change the css of the specific element of array In LWC

I got the answer:-

add data-id in HTML file

<template for:each={dayNames} for:item="date">
     <span class="dt days" key={date} data-id={date}> {date} </span>
</template>

add querySelector in JS file

 dayNames = ["SUN", "MON", "TUE", "WED" , "THU", "FRI", "SAT"];
 const now = new Date();
 day = this.dayNames[now.getDay().toString()];
 this.template.querySelector(`.days[data-id="${this.day}"]`)?.classList.add('currentDay');

here I add a class named currentDay using js

now finally add currentDay class in CSS

.currentDay{
   opacity :1;
}

I've Shared alternate Solution.

LWC Cmp:

<template>
   <template for:each={arrayOfObjects} for:item="date">
                <span class={date.colorclass} key={date.Day} data-id={date}> {date.Day} </span>
   </template>   
</template>

LWC JS :

import { LightningElement } from 'lwc';

export default class ElementofArray extends LightningElement {
    dayNames = ["SUN", "MON", "TUE", "WED" , "THU", "FRI", "SAT"];
    arrayOfObjects = [];
    connectedCallback() {
        const now = new Date();
        let day = this.dayNames[now.getDay().toString()];
         
        this.dayNames.forEach((item)=>{
         
            let obj = {};
            if(day==item){
             this.arrayOfObjects.push({'Day':item, 'colorclass':'green'});
            }
            else {
                this.arrayOfObjects.push({'Day':item, 'colorclass':'red'});
            }           
          
            this.arrayOfObjects.push(obj);            
           });           
    }
}

Override the CSS with your changes. CMP Css:

.red{
    color: red;
}
.green{
    color:green;
}