Guía Básica: Selectores de CSS

3

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

deivis

me gusta mucho toda la información que tienes en tu página, pero parece que me voy a volver loco es mucha informacion para aprendersela así no mas, que tanto se necesita saber de css3 para crear diseños web porque yo tengo digamos un nivel intermedio, ya como practica creo paginas web incluso responsive pero cuando estoy hechando codigo no me acuerdo de toda esta informacion, estara mal

Yotman
Bueno de hecho no es necesario ir aprendiendo de propiedad en propiedad, solo debes saber su uso y ya, sobre todo en las generales, como margin, padding, border, fonts, etc. Osea las que usas diariamente, sencillamente sin amargarte la vida puedes conseguirte una cheatsheet con todos las propiedades que se usan para css. Yo trabajo de esa forma y me va super bien, cuando no conoces alguna característica de css, la buscas y ya, Mozilla Developer Network es una buena opción, pero como te dije no es necesario, sobre todo si eres programador y te encargas de la parte funcional… Leer más »
wpDiscuz