LOS SELECTORES EN CSS

LOS SELECTORES EN CSS

¿Qué son los Selectores CSS?

Los selectores CSS son patrones que se utilizan para seleccionar los elementos HTML a los que se desea aplicar un estilo. Piensa en ellos como "etiquetas" que le dices al navegador: "¡Oye, aplica este estilo a todos los elementos que tengan esta etiqueta!".

Tipos de Selectores

1.    Selector de Elemento (por Etiqueta): Selecciona todos los elementos de un tipo específico (por ejemplo, todos los párrafos <p>).

Ejemplo:

p {

  color: blue; /* Hace que todo el texto de los párrafos sea azul */

  font-size: 16px; /* Cambia el tamaño de la fuente */

}

 

Para Probar en CodePen:

<p>Este es un párrafo.</p>

<p>Este es otro párrafo.</p>

 

2.    Selector de Clase: Selecciona todos los elementos que tienen una clase específica. Las clases son atributos que agregas a tus etiquetas HTML.

Ejemplo:

.resaltado {

  background-color: yellow; /* Pinta el fondo de amarillo */

  font-weight: bold; /* Pone el texto en negrita */

}

 

Para Probar en CodePen:

<p class="resaltado">Este párrafo está resaltado.</p>

<p>Este párrafo no.</p>

<h1 class="resaltado">Este encabezado está resaltado.</h1>

 

Selector de ID: Selecciona un único elemento que tiene un ID específico. Los IDs deben ser únicos en una página.

Ejemplo:

#titulo-principal {

  font-size: 2em; /* Tamaño de fuente más grande */

  color: green; /* Texto verde */

  text-align: center; /* Centra el texto */

}

 

Para Probar en CodePen:

<h1 id="titulo-principal">Este es el título principal.</h1>

<p>Este es un párrafo.</p>

 

Selector Universal: Selecciona todos los elementos de la página. Se representa con un asterisco *.

Ejemplo:

* {

  margin: 0; /* Elimina los márgenes predeterminados */

  padding: 0; /* Elimina el relleno predeterminado */

}

 

Para Probar en CodePen:

Este selector se utiliza normalmente al comienzo de un archivo CSS para reiniciar los estilos predeterminados del navegador. Verán que elimina el espacio predeterminado alrededor de los elementos.

 

Selector de Atributo: Selecciona elementos en función de la presencia o el valor de un atributo.

Ejemplo:

a[href="https://www.ejemplo.com"] {

  color: red; /* Cambia el color de los enlaces a rojo */

}

 

Para Probar en CodePen:

<a href="https://www.ejemplo.com">Enlace a Ejemplo.com</a>

<a href="https://www.google.com">Enlace a Google</a>

 

Selectores de Combinación (Descendiente): Selecciona elementos que son descendientes de otro elemento.

Ejemplo:

div p {

  font-style: italic; /* Pone el texto de los párrafos dentro de divs en cursiva */

}

 

Para Probar en CodePen:

<div>

  <p>Este párrafo está dentro de un div.</p>

</div>

<p>Este párrafo no está dentro de un div.</p>

 

¡Manos a la Obra en CodePen!

Abre CodePen.

Copia y pega los ejemplos HTML y CSS en sus respectivos paneles.

¡Experimenta! Cambia los valores de las propiedades CSS y observa cómo cambian los estilos en la página.

Intenta combinar diferentes selectores para crear estilos más específicos.

 

Puntos Clave:

·         Especificidad: Algunos selectores son más "específicos" que otros. En general, los selectores de ID son más específicos que los selectores de clase, y los selectores de clase son más específicos que los selectores de elemento.

·         Cascada: CSS significa "Cascading Style Sheets". Los estilos se aplican en cascada, lo que significa que los estilos más específicos tienen prioridad sobre los estilos menos específicos.

·         Practicar, practicar, practicar: La mejor manera de aprender los selectores CSS es practicando y experimentando.

 

Tarea en clase:

Crea una página web sencilla con estos dos elementos HTML (encabezados, párrafos.).

Utiliza diferentes tipos de selectores CSS para aplicar estilos únicos a cada elemento.

Intenta usar selectores de combinación para crear estilos más complejos.