¿Qué selectores CSS conoces?

• Selector universal (*) - selecciona todos los elementos.
• Selector de tipo (elemento) - selecciona elementos de un tipo específico.
• Selector de clase (.clase) - selecciona elementos con una clase específica.
• Selector de identificador (#id) - selecciona un elemento con un identificador específico.
• Selector de atributo ([atributo], [atributo="valor"], [atributo~="valor"], [atributo|="valor"], [atributo^="valor"], [atributo$="valor"], [atributo*="valor"]) - selecciona elementos basados en la presencia o valor del atributo.
• Pseudo-clases (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(seleccion)) - seleccionan elementos en un estado o posición específicos.
• Pseudo-elementos (::before, ::after, ::first-line, ::first-letter, ::selection) - seleccionan partes de un elemento.
• Combinadores:
  • Selector de descendiente (selector selector) - selecciona elementos descendientes del primer selector.
  • Selector de hijo directo (selector > selector) - selecciona hijos directos del primer selector.
  • Selector de hermano adyacente (selector + selector) - selecciona el elemento que es hermano inmediato (siguiente) del primer selector.
  • Selector de hermano general (selector ~ selector) - selecciona todos los elementos que son hermanos (siguientes) del primer selector.

Ejemplos:

/* Selector universal */
* {
  margin: 0;
  padding: 0;
}

/* Selector de tipo */
p {
  line-height: 1.5;
}

/* Selector de clase */
.highlight {
  color: yellow;
}

/* Selector de identificador */
#main-header {
  font-size: 2em;
}

/* Selector de atributo */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Pseudo-clase */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Pseudo-elemento */
p::first-letter {
  font-weight: bold;
}

/* Combinadores */
div p {
  margin-bottom: 10px; /* Párrafos dentro de div */
}
ul > li {
  list-style: none; /* Hijos directos de li dentro de ul */
}
h2 + p {
  margin-top: 5px; /* Párrafo que sigue inmediatamente a h2 */
}
h3 ~ p {
  color: gray; /* Todos los párrafos después de h3 */
}