Selectores en CSS

Un selector le dice al navegador a qué elementos se deben aplicar los estilos. Los más comunes son:

• Etiqueta: aplica a todos los elementos de ese tipo. Ej: p { color: blue; }
• Clase: comienza con punto (.) y se aplica con el atributo class
• ID: comienza con numeral (#) y se aplica con el atributo id

1. Selector por etiqueta

Funcionan escribiendo los estilos unicamente a las etiquetas, asi por ejemplo si es la etiqueta p, se aplicada a todos los parrafos, a continuación se presenta un ejemplo:

<style> p { background-color:blue; } </style> <h1>Revista Escolar</h1> <h2>Noticias Destacadas</h2> <p>Hoy se realizó la feria de ciencia en el colegio.</p> <h3>Entrevista a la profesora Marta</h3> <p>La profe Marta nos cuenta sobre sus experiencias enseñando tecnología.</p> <ul> <li>Robótica Educativa</li> <li>Laboratorios de Ciencias</li> </ul> <blockquote>“Siempre hay algo nuevo por aprender”</blockquote> <h2>Deportes</h2> <p>El equipo de baloncesto ganó el torneo intercolegial.</p> <img src="baloncesto.jpg" alt="Equipo de baloncesto"> <h3>Próximos partidos</h3> <ol> <li>Fútbol — Viernes</li> <li>Baloncesto — Sábado</li> </ol> <footer>© 2025 Revista Escolar - Todos los derechos reservados</footer> <hr> <h2>Clubes Escolares</h2> <p>El club de lectura inicia este mes.</p> <table border="1"> <tr> <th>Club</th> <th>Horario</th> </tr> <tr> <td>Robótica</td> <td>Jueves 3pm</td> </tr> </table> <address>Contacto: revista@colegio.edu</address> <aside> <p>¿Sabías que puedes enviar tus artículos?</p> </aside> <section> <h3>Galería de Fotos</h3> <img src="galeria1.jpg" alt="Foto 1"> </section> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Noticias</a></li> <li><a href="#">Clubes</a></li> </ul> </nav>
Ver resultado

Reto de selectores: Utiliza solo selectores por etiqueta para realizar las siguientes acciones usando CSS:

1. Poner todos los títulos <h2> con fondo amarillo.
2. Hacer que los párrafos <p> tengan el texto en color azul y tamaño de fuente de 18px.
3. Dar un borde rojo de 2px sólido a la tabla <table>.
4. Colocar todas las imágenes <img> al 50% de su tamaño original.
5. Quitar las viñetas de todas las listas no ordenadas <ul>.
6. Subrayar todos los enlaces <a> y cambiar su color a verde.

¡Recuerda! Usa solo selectores por etiqueta (por ejemplo: p, h2, table) y no uses clases ni IDs.

---

2. Selector por clase (.clase)

<style> .comentario { background-color:blue; } </style> <h2>Mi Red Social</h2> <div class="usuario">Juan Pérez</div> <p class="publicacion">¡Hoy tuve un gran día!</p> <div class="comentario">¡Qué bueno!</div> <p class="publicacion">¿Alguien vio la tarea de matemáticas?</p> <div class="like">👍 Me gusta</div> <p class="mensaje">Nos vemos mañana</p> <div class="usuario destacado">Laura Gómez</div> <p class="publicacion">¡Les recomiendo este libro!</p> <div class="comentario">Gracias por la recomendación</div> <p class="publicacion">¿Quién juega fútbol mañana?</p> <div class="like">❤️ Like</div> <p class="mensaje">Recuerden el paseo escolar</p> <div class="usuario">Carlos Ruiz</div> <p class="publicacion">¿Alguien va al club de robótica?</p> <div class="comentario">Yo voy 😊</div> <p class="mensaje">¡Apúntense al concurso!</p> <div class="like">💬 Comentario</div> <p class="publicacion">¿Me ayudan con inglés?</p>
Ver resultado

¡Reto CSS!

1. Selecciona todas las publicaciones .publicacion y cambia el color del texto a azul oscuro.
2. Selecciona los comentarios .comentario y ponles fondo gris claro.
3. Selecciona los "likes" .like y haz que el texto sea rojo y en negrita.
4. Selecciona todos los usuarios .usuario y cambia el color a verde oscuro.
5. Haz que los usuarios destacados .usuario.destacado tengan fondo amarillo.
6. Selecciona los mensajes .mensaje y ponles un borde negro de 1px sólido.

Recuerda: Usa correctamente los selectores de clase y combínalos si es necesario (por ejemplo: .usuario.destacado para los destacados).

---

3. Selector por ID (#id)

<style> #like1 { background-color:blue; } </style> <h2>Mi Red Social — Con ID</h2> <div id="usuario1">Juan Pérez</div> <p id="publicacion1">¡Hoy tuve un gran día!</p> <div id="comentario1">¡Qué bueno!</div> <p id="publicacion2">¿Alguien vio la tarea de matemáticas?</p> <div id="like1">👍 Me gusta</div> <p id="mensaje1">Nos vemos mañana</p> <div id="usuario2">Laura Gómez</div> <p id="publicacion3">¡Les recomiendo este libro!</p> <div id="comentario2">Gracias por la recomendación</div> <p id="publicacion4">¿Quién juega fútbol mañana?</p> <div id="like2">❤️ Like</div> <p id="mensaje2">Recuerden el paseo escolar</p> <div id="usuario3">Carlos Ruiz</div> <p id="publicacion5">¿Alguien va al club de robótica?</p> <div id="comentario3">Yo voy 😊</div> <p id="mensaje3">¡Apúntense al concurso!</p> <div id="like3">💬 Comentario</div> <p id="publicacion6">¿Me ayudan con inglés?</p>
Ver resultado

¡Reto CSS — Identificadores!

1. Cambia el color de texto del #publicacion3 a azul marino.
2. Pon un fondo amarillo al #usuario2.
3. Haz que el texto del #comentario1 sea rojo y en cursiva.
4. Agrega un borde verde de 2px al #like2.
5. Pon el texto del #mensaje3 en negrita y fondo gris claro.
6. Cambia el color de #publicacion6 a morado oscuro.

Importante: Recuerda que cada ID es único y debes usar el símbolo # en CSS para seleccionarlo.

---

4. Combinando selectores

<h2>Mi Club Escolar — Selectores Combinados</h2> <div class="miembro lider">Andrea López</div> <p class="anuncio especial">¡Bienvenidos al Club de Ciencia!</p> <div class="comentario positivo">¡Excelente inicio!</div> <p class="anuncio">La próxima reunión será el viernes.</p> <div class="actividad destacada">Proyecto de Robótica</div> <p class="mensaje importante">Recuerden traer sus materiales.</p> <div class="miembro">David Ramírez</div> <p class="anuncio especial">Estamos buscando nuevos integrantes.</p> <div class="comentario">¡Yo quiero participar!</div> <p class="anuncio">Se realizará un taller de programación básica.</p> <div class="actividad">Concurso de Experimentos</div> <p class="mensaje">Los mejores trabajos serán premiados.</p> <div class="miembro lider">Sofía Martínez</div> <p class="anuncio">¡Anímate y sé parte del club!</p>
Ver resultado

¡Reto CSS — Usa combinaciones de selectores!

1. Selecciona todos los p.anuncio y pon el texto en azul marino.
2. Selecciona los miembros que sean líderes .miembro.lider y ponles fondo amarillo.
3. Haz que las actividades destacadas .actividad.destacada tengan borde rojo y texto en negrita.
4. Selecciona los div.miembro (pero solo si son div) y cambia su color a verde oscuro.
5. Selecciona los comentarios positivos .comentario.positivo y ponles fondo gris claro.
6. Haz que los mensajes importantes p.mensaje.importante tengan un borde azul y fuente cursiva.

¡Recuerda! Usa combinaciones como etiqueta.clase o .clase1.clase2 y no selecciones todo con un solo nombre.

---

---