How to change an element after an action on the page?

Question

I would like when content was added to the input the previous text "Label" turned blue. Are inside a div, a p and an input, the goal is when writing in the input the previous p turned blue.

.subInput:nth-child(-1), .subInput:focus{/*Tentei usar isso, mas não deu certo*/
    color: blue;
 }

<div class="Subscribe">
		<div id="CxSub1" class="caixadeSubscribe">
			<p class="tituloSub">TITULO. Esse Titulo tem que ficar azul quando escrever no input</p>
			<input id="subInpt1" type="text" name="LoremIpsum" class="subInput" >
		</div>
</div>

}

Answer 1

As quoted in Change parent properties if CSS child exists just use the selector :focus-within in the parent element of your field:

.texto-azul:focus-within > p {
  color: blue;
}

<div class="texto-azul">
  <p>Este texto ficará azul</p>
  <input type="text">
</div>

Answer 2

I don’t know much about css, but I know it can be easily done in Javascript. Create an event for when the input is not empty then "title" gains a style attribute

function pintaTitulo(){
  var titulo = document.getElementById('titulo');
  var inputContent = document.getElementById('subInpt1').value;
  
  if(inputContent.length > 0){
    titulo.setAttribute("style","color:blue");  
  }
  else{
    titulo.setAttribute("style","color:default");
  }
}

<div class="Subscribe">
  <div id="CxSub1" class="caixadeSubscribe">
    <p class="tituloSub"><span id="titulo">TITULO</span>. Esse Titulo tem que ficar azul quando escrever no input</p>
    <input id="subInpt1" type="text" name="LoremIpsum" class="subInput" oninput="pintaTitulo()" >
  </div>
</div>