Selectores CSS: Guía Paso a Paso para Dominar el Estilo Web

Los selectores en CSS permiten apuntar a elementos específicos dentro de un documento HTML para aplicarles estilos. A continuación, exploramos diversos tipos de selectores, sus usos y ejemplos.

1. Selectores Básicos

Universal Selector

Aplica estilos a todos los elementos de la página.

css

* {
margin: 0;
padding: 0;
}

Selector por ID

Selecciona un elemento único con un atributo id específico. Mostrar siempre los detalles

css

#id {

color: blue;

}

Selector por Clase

Aplica estilos a todos los elementos que comparten una clase.

Mostrar siempre los detalles

css

.class {

font-size: 16px;

}

Selector por Etiqueta

Aplica estilos a todas las etiquetas de un tipo específico.

css

div {
background-color: lightgray;
}

Selector por Tipo (Múltiples etiquetas)

Aplica estilos a varias etiquetas seleccionadas.

css

h1, h2, h3, h4, h5, h6 {
font-family: Arial, sans-serif;
}

2. Selectores Combinados

Selector de Hijos Directos

Aplica estilos solo a elementos hijos directos.

css

ul > li {

list-style: none;

}

Selector de Descendientes

Aplica estilos a los elementos descendientes, sin importar su profundidad en el árbol DOM.

css

div p {
color: darkblue;
}

Selector de Elementos Adyacentes

Selecciona un elemento que está inmediatamente después de otro.

css

h2 + p {
font-weight: bold;
}

Selector de Hermanos Generales

Aplica estilos a los elementos hermanos que comparten el mismo padre.

css

div ~ p {
margin-left: 20px;
}

Selectores por Atributo

Igualdad Exacta

Aplica estilos a elementos con un atributo específico igual a un valor.

css

[type="text"] {
border: 1px solid black;
}

Subcadena en Atributo

Aplica estilos a elementos cuyos atributos contienen un valor específico.

css

[attribute*="value"] {
color: green;
}

Comienza con un Valor

Selecciona elementos cuyos atributos comienzan con un valor específico.

css

[attribute^="prefix"] {
background-color: yellow;
}

4. Pseudo Clases

Estados de Enlace

Define estilos basados en el estado de un enlace.

css

a:link { color: blue; }      /* Enlace no visitado */
a:visited { color: purple; } /* Enlace visitado */
a:hover { color: red; }      /* Al pasar el mouse */
a:active { color: orange; }  /* Durante el clic */

Primer y Último Hijo

Aplica estilos al primer o último hijo de un contenedor.

css

p:first-child {
font-weight: bold;
}

p:last-child {
text-decoration: underline;
}

Enésimo Hijo

Selecciona un hijo específico basado en su posición.

css

div > p:nth-child(3) {
color: teal;
}

Enésimo Hijo desde el Final

Selecciona un hijo basado en su posición desde el final.

css

div > p:nth-last-child(2) {
background-color: lightpink;
}

Ejemplo Completo

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Selectores CSS</title>
<style>
  /* Universal */
  * {
    box-sizing: border-box;
  }

  /* ID */
  #header {
    background-color: lightblue;
  }

  /* Clase */
  .highlight {
    color: red;
  }

  /* Etiqueta */
  p {
    line-height: 1.5;
  }

  /* Hijos directos */
  ul > li {
    font-style: italic;
  }

  /* Descendientes */
  section p {
    margin: 10px 0;
  }

  /* Pseudo clases */
  a:hover {
    text-decoration: none;
  }

  div > p:nth-child(2) {
    font-size: 18px;
  }
</style>
</head>
<body>
<div id="header">Encabezado</div>
<section>
  <p>Primer párrafo</p>
  <p>Segundo párrafo</p>
  <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
  </ul>
  <a href="#">Enlace</a>
</section>
</body>
</html>