Principales selectores en CSS

1. Selectores por tipo (Type Selectors)

Los selectores en CSS permiten elegir elementos HTML y aplicarles estilos. Conocer los selectores básicos ayuda a seleccionar elementos en la página de manera efectiva y precisa, haciendo que CSS sea una herramienta poderosa para dar estilo al contenido web. En este artículo veremos los principales tipos de selectores: selectores por tipo (Type Selectors), selectores por clase, selectores por identificador, selectores en grupo y universales.

Los selectores por tipo seleccionan todos los elementos de una etiqueta específica. Por ejemplo, si necesitamos aplicar estilos a todos los párrafos en una página, usamos un selector por tipo con la etiqueta <p>.

p {
  color: blue;
  font-size: 16px;
}

<p>Este texto será azul y tendrá un tamaño de 16 píxeles.</p>
<p>El segundo párrafo con los mismos estilos.</p>

Los selectores por tipo son útiles cuando se necesita aplicar estilos a todos los elementos de un mismo tipo, como todos los encabezados o párrafos. Proporcionan un control general sobre la apariencia de un grupo de elementos y facilitan el mantenimiento del sitio web.

2. Selectores por clase (Class Selectors)

Los selectores por clase permiten seleccionar elementos con un valor específico del atributo class. Una clase se indica con un punto (.) antes del nombre de la clase. La misma clase se puede usar para varios elementos, lo que permite aplicar los mismos estilos a múltiples elementos.

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">Este texto está resaltado con color azul sobre un fondo amarillo.</p>
<p>Texto normal sin clase.</p>
<div class="highlight">Este bloque también estará resaltado con los estilos de la clase highlight.</div>

Los selectores por clase son versátiles y útiles, ya que permiten crear estilos que se pueden aplicar a diferentes elementos. Las clases son especialmente útiles cuando es necesario estilizar un grupo de elementos no relacionados.

3. Selectores por identificador (ID Selectors)

Los selectores por identificador seleccionan elementos con un valor específico del atributo id. Un identificador se indica con el símbolo # antes del nombre. A diferencia de las clases, un ID debe ser único en la página, lo que lo hace ideal para estilizar elementos únicos, como un título o un menú de navegación.

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">Encabezado de la página</h1>
<p>Este párrafo no será afectado por el selector ID.</p>

Los selectores por identificador aplican el estilo solo a un elemento en la página, por lo tanto, se usan para resaltar elementos únicos con estilos específicos.

4. Selectores en grupo (Group Selectors)

Los selectores en grupo permiten aplicar los mismos estilos a varios elementos. Esto se hace con una coma que une varios selectores en una sola regla CSS. Los selectores en grupo simplifican el código, ya que permiten definir estilos comunes para varios tipos de elementos.

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

<h1>Encabezado de primer nivel</h1>
<h2>Encabezado de segundo nivel</h2>
<h3>Encabezado de tercer nivel</h3>
<p>Este texto no será afectado por el selector en grupo.</p>

Los selectores en grupo ayudan a reducir el código CSS y simplifican la estilización, especialmente cuando es necesario aplicar propiedades comunes a diferentes elementos, como los encabezados de distintos niveles.

5. Selectores universales (Universal Selectors)

El selector universal se indica con un asterisco (*) y selecciona todos los elementos en la página. Es una herramienta poderosa que permite rápidamente establecer estilos básicos para todos los elementos, como definir márgenes iguales o establecer una fuente estándar. El selector universal es útil para un "reset" de estilos, cuando se quiere eliminar los márgenes y rellenos predeterminados del navegador para un control más preciso de los estilos.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>Encabezado</h1>
<p>Párrafo de texto con márgenes y rellenos en cero.</p>
<div>Contenedor con márgenes y rellenos en cero.</div>

En este ejemplo, el selector universal elimina márgenes y rellenos para todos los elementos, ayudando a mantener la consistencia de los estilos en la página. Este enfoque se utiliza a menudo al inicio del código CSS para crear una estilización uniforme.