Как изменить один элемент css если он имеет одинаковый класс с другим элементом и они меняются оба?

Использовать селектор id

добавь ему дополнительный класс, сделай селектор более специфичным.

Нужно уточнить селектор CSS.
Например, использовать вложенные селекторы:

 
 
  
Первый текст
 
  
Второй текст
 
 

 .parent .text:nth-child(2) { /* Выбираем второй элемент с классом "text" внутри элемента с классом "parent" */ 
  color: red; 
} 

Или использовать ID:

 
Второй текст
 

 #special-text { 
  color: red; 
} 

Можно так же использовать более специфичный селектор класса:

 
Второй текст
 

А можно использовать псевдоклассы :nth-child(), :first-child, :last-child:

 .text:first-child { /* Выбираем первый элемент с классом "text" */ 
  color: red; 
} 

Или вообще атрибуты данных:

 
Первый текст
 
Второй текст
 

 .text[data-id="2"] { 
  color: red; 
} 

Кста, чем специфичнее селектор, тем выше его приоритет, и лучше не используй слишком много сложных селекторов, незачем излишне усложнять код.
P.S. Я разделил код на два блока (HTML и CSS) для лучшей читаемости и наглядности.

Сначала ответить (для себя) на вопрос, зачем тебе один и тот же класс двум элементам, которые должны иметь разное оформление. Если это элементы, вложенные в разные элементы, то можно по родительскому элементу идентифицировать.

если он первый или последний. то мона типа фирст-чилд...

Можно динамически менять шаблоны обернутые в веб-компонент. Например светлую тему поменять на темную. У меня пока нет такого примера, но все веб-компоненты работают по одному алгоритму. На следующих страницах клонируется шаблон формы на разных страницах. Разумеется CSS шаблона полностью изолирован от остального контента и применим только для этого компонента. Компонентов может быть несколько для разных модулей одного документа.

https://bulletproof-password.web.app/slovo.html
https://bulletproof-password.web.app/creditcard.html
https://bulletproof-password.web.app/Grid Layout with Cell Spanning.html ?

Инкапсуляцию можно также и использовать через замыкания на уровне функций javascript. Веб-компоненты это делают на уровне DOM.