Hola chicos, ¿qué pasa si tengo elementos html como a continuación?
<div> <div>Name</div> <div><input type="text" class="check"> <div>Age</div> <div><input type="number" class="check"></div> <div>address1</div> <div><input type="text"></div> </div>Quiero cambiar los elementos anteriores de los elementos que tienen la propiedad .check css. algo así como Nombre -> *Nombre con color de lectura.
¿Es posible en CSS? o ¿Necesito mezclar con JS?
Cualquier idea o sugerencia será apreciada.
Gracias.
Aquí hay una posible solución. Cambios aplicados:
input ya no están dentro de su propio divinput y el div que contiene la etiqueta cambiaron de posición. CSS solo puede mirar hacia adelante. .container { display: flex; flex-direction: column-reverse; } input { width: 200px; } input.check+div { color: green; } <div> <div class="container"> <input type="text" class="check"> <div>Name</div> </div> <div class="container"> <input type="number" class="check"> <div>Age</div> </div> <div class="container"> <input type="text"> <div>address1</div> </div> </div>Tengo que decir que la idea de Gerard me parece bastante buena y la usaría si la necesitara, pero quizás también puedas intentar darle clases a esos elementos a los que quieres aplicar CSS, para que puedas seleccionar directamente esos elementos. Si eso no es lo que desea, también puede intentar usar ntn-child, así:
<div class="my-class"> <div>Name</div> <div><input type="text" class="check"> <div>Age</div> <div><input type="number" class="check"></div> <div>address1</div> <div><input type="text"></div> </div>CSS
.my-class:nth-child(n) { color: red; }Tenga en cuenta que n es el número secundario al que desea aplicar el código, por lo que, dependiendo de cuántos elementos haya dentro de su elemento principal, puede establecer n en un número u otro.