Tipos de selectores básicos

Para poder crear un sitio web con un diseño profesional, es primordial que conozcamos y dominemos los selectores de CSS.

Una regla de CSS está formada por un selector y  una declaración. Esta última indica "qué se debe hacer", mientras que el selector indica "a quién se lo deber hacer". Por lo tanto, los selectores son importantes para aplicar correctamente los estilos CSS en una página web.

Existen cincos tipos de selectores básicos:

 

UNIVERSAL

Sirve para seleccionar todos los elementos de la página. Se representa mediante un asterisco en su declaración. Ejemplo:

ETIQUETAS

Selecciona todos los elementos marcados con una determinada etiqueta HTML. Ejemplo:

SELECTOR DESCENDENTE

El selector descendente se utiliza para encontrar objetos dentro de otros objetos. Por ejemplo, si quisiéramos darle un estilo a cualquier link dentro de alguna lista desordenada, usaríamos lo siguiente:


ID

Un id es un selector CSS personalizado. Los selectores ID llevan el símbolo (#) en su declaración dentro de la CSS. Este se utiliza para marcar un elemento único dentro de la página ya que no puede haber dos elementos con el mismo id en la misma página. Ejemplo:

CLASE

Una clase es otro selector personalizado que se puede utilizar cuantas veces sea necesario en una página sobre cualquier etiqueta HTML. Este tipo de selectores son fundamentales para dar estilo a partes concretas del sitio web y para ello utiliza nombres arbitrarios que nosotros mismos generamos. Los selectores de clase deben de estar antecedidos de un punto en su declaración dentro de la CSS. Ejemplo:

COMPUESTO

Todos los selectores anteriores se pueden combinar para crear un selector compuesto que designa una sección particular de la página. Ejemplo: