¿Cómo usar un selector en CSS o JavaScript?

En CSS, los selectores indican a qué elementos HTML aplicar estilos. En JavaScript, se utilizan para seleccionar elementos del DOM.

Tipos principales de selectores CSS:

• Selector de tipo: Selecciona todos los elementos de un tipo especificado.

  div {
    /* estilos para todos los <div> */
  }
  

• Selector de clase: Selecciona elementos con una clase específica.

  .mi-clase {
    /* estilos para elementos con la clase "mi-clase" */
  }
  

• Selector de ID: Selecciona el elemento con un ID específico (debe ser único).

  #mi-id {
    /* estilos para el elemento con ID "mi-id" */
  }
  

• Selector universal: Selecciona todos los elementos.

  * {
    /* estilos para todos los elementos */
  }
  

• Combinadores: Combinan selectores.
  • Descendiente ( ): div p - selecciona todos los <p> dentro de <div>.
  • Hijo directo (>): div > p - selecciona todos los <p> que son hijos directos de <div>.
  • Hermano adyacente (+): h2 + p - selecciona el primer <p> que sigue inmediatamente a <h2>.
  • Hermano general (~): h2 ~ p - selecciona todos los <p> que siguen a <h2>.

En JavaScript, para seleccionar elementos del DOM, se usan los métodos querySelector y querySelectorAll.

• querySelector: Devuelve el primer elemento que coincide con el selector CSS especificado.

  // Selecciona el primer elemento con la clase "mi-clase"
  const elemento = document.querySelector('.mi-clase');
  

• querySelectorAll: Devuelve una NodeList (similar a un array) de todos los elementos que coinciden con el selector CSS.

  // Selecciona todos los elementos `<div>`
  const elementos = document.querySelectorAll('div');
  

Ejemplo de uso en JavaScript:

// Encontrar un botón por ID
const miBoton = document.querySelector('#mi-boton');

// Añadir un manejador de evento de clic
if (miBoton) {
  miBoton.addEventListener('click', () => {
    alert('¡Botón pulsado!');
  });
}

// Encontrar todos los elementos de lista con la clase "lista-item"
const itemsLista = document.querySelectorAll('.lista-item');

// Cambiar el texto de cada elemento de la lista
itemsLista.forEach(item => {
  item.textContent = 'Texto actualizado';
});

La relación entre los selectores CSS y su uso en JavaScript con querySelector/querySelectorAll es directa. Puedes usar los mismos selectores CSS que en los estilos para seleccionar elementos en JavaScript.