Menu / CSS / Lecciones / Tipos de selectores

Tipos de selectores - CSS.

A un elemento de HTML se le puede identificar de diferentes maneras, puede ser por nombre de etiqueta, por nombre de clase, por id, hijo de un elemento y más maneras.

Selectores básicos

Selector de tipo
Selecciona todos los elementos que coinciden con el nombre de la etiqueta especificada.
Selector de clase
Selecciona los elementos cuyo valor de clase contenga el indicado. Para indicarlo, le precede un punto ".".
Selector de id
Selecciona el elemento cuyo valor de id sea igual al especificado. Solo puede ser uno. Para indicarlo, le precede una almohadilla "#".
Selector universal
Selecciona todos los elementos, si se indica que es hijo de otro, seleccionará todos los elementos dentro de éste. Sólo hay uno y es el asterisco "*".
Selector de atributo
Selecciona los elementos que tengan cierto atributo o cierto valor en el atributo especificado. Para indicarlo, se escribe entre corchetes "[]".

Selectores con combinadores

Selector de hermanos adyacentes.
Se indican dos selectores separados por un símbolo "+". Indica que selecciona el elemento indicado por el selector de la derecha del + que se encuentren (En HTML) inmediatamente debajo del seleccionado por el lado izquierdo.
Selector de hermanos.
Se indican dos selectores separados por un símbolo "~". Indica que selecciona el elemento indicado por el selector de la derecha de la ~ que se encuentren (En HTML) al mismo nivel del seleccionado por el lado izquierdo en el mismo contenedor.
Selector de hijo directo.
Se indican dos selectores separados por un símbolo ">". Indica que selecciona los elementos indicados por el selector de la derecha del > que sean (En HTML) directamente hijos del seleccionado por el lado izquierdo
Selector de descendiente.
Se indican dos selectores separados por un espacio " ". Indica que selecciona los elementos indicados por el selector de la derecha del espacio que sean (En HTML) hijos del seleccionado por el lado izquierdo