ID mit Klasse übertrumpfen?

[Bruder Jakob]

Hallo,

kurze Frage...

Habe einen Paragraphen, der inaktiv grau ist und aktiv orange sein soll.

Dachte, ich erledige das via classList.add (was in weiterer Folge wahrscheinlich eher einem classlist.toggle weichen wird)

Blöderweise wird die Klasse ignoriert, da es bereits einen Pfad auf denselben Paragraphen gibt, der eine ID enthält und IDs höherrangig als Klassen bewertet werden (anscheinend auch, wenn, wie in meinem Fall, die ID ein parentparent(...) Element definiert ).

Gibt's dafür einen Easy Fix (der auch semantisch halbwegs hält) oder muss ich mein gesamtes HTML umschreiben?

Danke, LG!

#eins > div > p {
	color: grey;	/* soll den inaktiven Status darstellen */
} 
.aktiv {
	color: orange;
}

let parap = document.querySelector("p"); // Der Einfachheit halber habe ich hier nur mal einen Paragraphen im Dokument angenommen
parap.classList.add("aktiv");

<section id="eins">
	<div>
		<p>Ich sollte orange sein. (?)</p>
	</div>
</section>