Curso IT Fundamentos CSS 020_Selectores

Selectores

Los selectores se utilizan para seleccionar los elementos del documento que necesitan ser estilizados. A través de diferentes modos de selección, indican al navegador qué elementos reciben qué estilos.

Selector ID (#)

Selecciona un elemento por su ID único. El selector ID debe ser único en el documento y no debe reutilizarse.

Ejemplo:

1
#myID {
2
  /* Reglas de estilo */
3
}

Selector de clase (.)

Selecciona elementos por su nombre de clase. Los selectores de clase pueden usarse para múltiples elementos, y un mismo elemento puede tener múltiples clases.

Ejemplo:

1
.myClass {
2
  /* Reglas de estilo */
3
}

Selector de elemento (p, h1)

Selecciona elementos por su nombre de elemento HTML. El selector de elemento selecciona todos los elementos coincidentes en el documento.

Ejemplo:

1
p {
2
  /* Reglas de estilo */
3
}

Selector universal (*)

Selecciona todos los elementos del documento. Debe usarse con precaución ya que coincide con todos los elementos y puede afectar el rendimiento.

Ejemplo:

1
* {
2
  /* Reglas de estilo */
3
}

Selector de atributo ([type="text"])

Selecciona elementos por sus valores de atributo. Los selectores de atributo pueden seleccionar elementos basándose en diferentes valores de atributo.

Ejemplo:

1
input[type="text"] {
2
  /* Reglas de estilo */
3
}

Selector de pseudoclase

Selecciona estados o posiciones especiales de los elementos. Se utilizan para estados de interacción como hover, visitado, etc.

Ejemplo:

1
a:hover {
2
  /* Reglas de estilo */
3
}

Selector de pseudoelemento

Selecciona partes especiales de los elementos, como la primera línea, la primera letra, etc.

Ejemplo:

1
p::first-line {
2
  /* Reglas de estilo */
3
}

Selector de hijo

Selecciona los elementos hijos directos de un elemento. Solo selecciona hijos directos, no descendientes.

Ejemplo:

1
ul > li {
2
  /* Reglas de estilo */
3
}

Selector general de hermanos

Selecciona todos los elementos hermanos con el mismo elemento padre. Selecciona todos los elementos hermanos después del elemento especificado, sin requerir adyacencia.

Ejemplo:

1
h2 ~ p {
2
  /* Reglas de estilo */
3
}

Selector de hermano adyacente

Selecciona el elemento hermano inmediatamente después del elemento especificado.

Ejemplo:

1
h2 + p {
2
  /* Reglas de estilo */
3
}

Selector de descendientes

Selecciona todos los elementos descendientes bajo un elemento, incluyendo elementos profundamente anidados.

Ejemplo:

1
div p {
2
  /* Reglas de estilo */
3
}

Selector de unión (,)

Combina múltiples selectores para seleccionar todos los elementos que coincidan con cualquiera de ellos. Se usa para seleccionar simultáneamente múltiples tipos de elementos y aplicar las mismas reglas de estilo.

Ejemplo:

1
h1, h2, h3 {
2
  /* Reglas de estilo */
3
}

Lista de selectores

Enumera múltiples selectores por orden de prioridad para seleccionar el más adecuado.

Ejemplo:

1
div p,
2
.myClass,
3
#myID {
4
  /* Reglas de estilo */
5
}

Reglas de nomenclatura de selectores

• Los nombres de selectores deben estar compuestos por letras, números, guiones bajos o guiones.

• Los nombres deben comenzar con una letra o guion bajo.

• Los nombres no pueden comenzar con un número.

• Los nombres no pueden contener espacios.

  Recomendaciones:

• Use nombres significativos: Los nombres de selectores deben reflejar claramente la función o propósito del elemento seleccionado.

• Siga convenciones de nomenclatura: Use convenciones consistentes como camelCase o kebab-case para mejorar la consistencia del código.

• Evite abreviaturas sin sentido: Evite abreviaturas demasiado cortas o sin significado para que otros desarrolladores puedan entender.

• Siga la semántica: Use selectores semánticos para mejorar la legibilidad y mantenibilidad del código.