{ . . . }

Guía Básica: Selectores de CSS

La finalidad de CSS es aplicar estilos y mejorar la apariencia de los elementos que se encuentran en un documento web, y todo esto lo hace por medio de los selectores de CSS. Sin duda la sangre de este lenguaje.

En CSS, un selector es un patrón que nos permite apuntar a elementos específicos del documento, y CSS nos ofrece múltiples opciones para alcanzarlos sin importar su tipo, posición o contexto. En esta entrada veremos una guía de los selectores de CSS y cómo podemos utilizarlos para llegar a cualquier elemento en el documento web.

Más información: W3C


Selectores Básicos:

Los selectores básicos en CSS nos ayudan a seleccionar elementos HTML basados en su tipo, clases o identificador.

Selector de Tipo
Selector de Grupo
Selector de Clase
Selector de Identificador
Selector Universal

Selectores Compuestos (Combinadores):

Este grupo combina múltiples selectores para poder alcanzar elementos HTML en función de su posición en el documento.

Selector de Descendientes
Selector de Hijos Directos
Selector de Hermanos Adyacentes
Selector General de Hermanos

Selectores de Atributos:

Este grupo selecciona elementos HTML en base a los diferentes atributos que estos puedan tener especificados.

Nombre de Atributo
Atributo y Valor
Atributo y Valor / Valor Espaciado
Atributo y Valor / Seguido por un guión
Atributo Empieza con Valor Especificado
Atributo Termina con Valor Especificado
Atributo Contiene Valor Especificado

Pseudo-elemento:

Los Pseudo-elementos en CSS se utilizan para estilizar partes especificas de un elemento o generar contenido en torno a estos.

Desde el nivel 3 de los selectores en CSS, los Pseudo-elementos establecen los dobles puntos (::) para establecer la diferencia sintáctica entre pseudo-clases y pseudo-elementos
Before y After
First Letter
First Line
Selection

Pseudo-clase:

Este grupo de selectores nos permiten aplicar estilos a un elemento ya sea en relación a su contexto como a factores externos que pueden interactuar con este, también a algún estado especial que esté relacionado con la naturaleza de dicho elemento.

Link
Visited
Hover
Active
Focus
First Child
Last Child
First Of Type
Last of Type
Only Child
Only of Type
Nth Child
Nth Last Child
Nth of Type
Nth Last of Type
Empty
Root
Enabled
Disabled
Checked
Required
Optional
Read Only
Read Write
Valid
Invalid
In Range
Out Of Range
Lang
Not
Target

Comentar

avatar
Ordenar:   Nuevos | Antiguos | Más votados
Linaya

Buena guía de los selectores de CSS, gracias por tomar el tiempo para hacerla ya que la mayoría de esto esta en ingles

wpDiscuz