Hola a todos, estoy trabajando en un proyecto (en el área de frontEnd) y hace varios días estoy realizando tareas de css, ayer tuve un problema similar y con uno de los chicos del foro lo pudimos solucionar.
el tema en cuestión es el siguiente:
estoy realizando la tarea de que en caso de que al enviar un formulario y haya campos (input, select, texatrea) de tipo required se muestre el calsico (!) indicando que falta completar ese campo
ejemplo :


mi estructura html par amis inputs es la siguiente :


ahora si mi problema al que no le estoy pudiendo dar solución es el siguiente:
a medida que los campos estane n estado required o no, se agregan y se quitan calses.
necesito que cuando mi input tenga las siguientes clases : en mi etiqueta span que esta abajo asignar un estilo pero como son dos elementos que no están "anidados" no se como hacerlo.

El inconveniente es que no puedo usar javascript lo ideal seria resumir todo en css.

Si a alguno se le ocurre alguna idea que aclare mi oscuro camino a la desesperación estare muy agradecido.
Desde ya saludos y gracias ! 

.ng-valid ~ span,  .ng-valid-required ~ span{
    color:transparent;
}