Estilos sin ID ni Class

07 Estilos sin ID ni Class

Aquí tienes un hermoso formulario de inscripción. Tu tarea es reescribir los estilos CSS sin usar selectores de clase (.clase) ni selectores de ID (#id), excepto para la clase .active.

Puedes leer el código original para entender cómo se hizo, pero luego deberás reemplazar todos los selectores que usen clases o IDs.

🎯 Objetivo:

Reemplaza todos los selectores .class y #id del index.html por otros tipos de selectores CSS para lograr el MISMO aspecto visual.

El único selector de clase que puedes seguir usando es .active.

Al final, tu formulario debe verse EXACTAMENTE igual al original:

📚 Tipos de selectores que SÍ puedes usar:

Tipo de selector	Ejemplo	Qué selecciona
Elemento	div, p, h1, form	Todos los elementos de ese tipo
Descendente	div p	Los p que están dentro de div
Hijo directo	div > p	Los p que son hijos DIRECTOS de div
Adyacente	h1 + p	El p que está JUSTO después de un h1
General de hermanos	h1 ~ p	Todos los p hermanos después de un h1
Atributo	[type="text"]	Inputs con type=“text”
Atributo parcial	[class~="active"]	Elementos cuya clase contiene “active”
Pseudoclase	:hover, :first-child, :nth-child()	Estados o posiciones específicas
Pseudoelemento	::before, ::after, ::first-line	Partes específicas de un elemento

📝 Instrucciones paso a paso:

1. Analiza el CSS original

Identifica todos los selectores que usan .clase o #id. Por ejemplo:

/* Estos los debes reemplazar */
.input-text { border: 1px solid gray; }
#submit-btn { background: blue; }
.form-container { padding: 20px; }

2. Reemplaza cada uno por un selector más genérico

/* En lugar de .input-text */
input[type="text"] { border: 1px solid gray; }

/* En lugar de #submit-btn */
input[type="submit"] { background: blue; }

/* En lugar de .form-container */
form { padding: 20px; }

3. Caso especial con .active

Puedes mantener .active tal cual:

.active { background: yellow; }

💡 Ejemplos de reemplazo:

HTML original:

<div class="formulario">
  <label class="etiqueta">Nombre:</label>
  <input id="nombre-input" type="text" class="input-text">
  <button class="btn active">Enviar</button>
</div>

CSS original (¡NO permitido!):

.formulario { border: 1px solid black; }
.etiqueta { font-weight: bold; }
#nombre-input { background: #f0f0f0; }
.btn { padding: 10px; }

CSS permitido (reemplazado):

div { border: 1px solid black; }
label { font-weight: bold; }
input[type="text"] { background: #f0f0f0; }
button { padding: 10px; }
.active { background: yellow; } /* Este sí se permite */

⚠️ Posibles desafíos y soluciones:

Desafío	Solución
Diferenciar varios inputs del mismo tipo	Usa :nth-child() o selectores de hermanos
Seleccionar solo el primer hijo	Usa :first-child o :first-of-type
Seleccionar elementos dentro de un contenedor específico	Usa selectores descendentes: div p, form input
Evitar afectar elementos no deseados	Sé más específico: form > div > input

🧪 Prueba tu trabajo:

1. Carga el formulario en el navegador
2. Compara visualmente con el GIF original
3. Verifica que:
   • Los colores sean los mismos
   • Los márgenes y padding sean idénticos
   • Los efectos :hover funcionen igual
   • La clase .active siga funcionando

✅ Lista de verificación:

• No hay ningún selector que comience con . (excepto .active)
• No hay ningún selector que comience con #
• El formulario se ve IDÉNTICO al original
• La clase .active sigue aplicando sus estilos
• Los efectos interactivos (hover, focus) funcionan correctamente

🔍 Pistas avanzadas:

• Si necesitas seleccionar un input específico dentro de un formulario, usa form input[type="text"]:nth-child(2)
• Para seleccionar el último elemento de un grupo: :last-child o :last-of-type
• Si dos elementos comparten el mismo selector, usa la estructura HTML para diferenciarlos: div.entrada > input → pero sin clase, sería div > input (si solo hay un div)
• Recuerda que [atributo="valor"] es tu mejor amigo para inputs específicos

¡Intenta usar la mayor variedad posible de selectores! Es una excelente práctica para dominar CSS. 🚀