Necesito la ayuda de los sabios maestros de CSS

[Razzari]

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 :

Código [Seleccionar] Expandir



<label class="item inputs">

        <input name="workID" class="item item-input ion-autocomplete item-100 "  required />

        <span class="badge"><i class="ion-information-circled"></i></span>

</label>
                               


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 :

Código [Seleccionar] Expandir

. ng-valid .ng-valid-required
en mi etiqueta span que esta abajo asignar un estilo

Código [Seleccionar] Expandir

color:transparent;
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 ! 

[engel lex]

necesitas jscript, css es solo para darle estilos, para interacción entre elementos no anidados necesitas jscript

[Myguel]

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