Tiempo de lectura:2 Minutos, 2 Segundos

En artículos anteriores hemos visto qué es CSS y su sintaxis y ahora vamos a detallar la clasificación de selectores y selectores simples en CSS.

A grandes rasgos tienes que comprender que los selectores se usan para buscar o seleccionar el elemento HTML al que se quiere aplicar el estilo ahorrando tiempo y lineas de código al desarrollador.

Clasificación de Selectores

Podemos dividir los selectores en los siguientes bloques:

Selectores simples

Selector universal

Este selector es poco usado ya que aplica un mismo estilo a todos los elementos de la pagina. Su utilización es muy sencilla, en el siguiente ejemplo puedes comprobar como se elimina el margen a todos los elementos de la pagina.

Selectores de elementos

Los selectores de elementos seleccionan elementos HTML en función de su nombre del elemento. En el siguiente ejemplo puedes observar cómo le aplicamos el color blanco a un párrafo y el color rojo a todos los textos de encabezado h1.

Selectores de ID

Los selectores de ID utilizan el atributo ID del elemento HTML. Debido a que en una página HTML el id del elemento es único, este estilo se aplicara únicamente a un elemento. Esto lo conseguimos escribiendo una «#» delante del id.

En el siguiente ejemplo puedes observar cómo se aplica el color blanco al elemento HTML que tenga por id titulo1 (en HTML tendrás algo similar a id=’titulo1′)

Selectores de clase

Los selectores de clase aplican el estilo que le indiquemos a todos aquellos elementos que utilicen esa clase. Esto lo conseguimos escribiendo un «.» delante de la clase.

En el siguiente ejemplo puedes observar que aplicamos el color blanco aquellos elementos que utilicen la clase «center» (en html class=’center’)

También puedes indicarle que un tipo de elemento que utilice dicha clase se vea afectado por este estilo. Por ejemplo, en el siguiente código puedes observar como el estilo solo se aplicara a un párrafo «p» que utilice la clase «center»

Agrupación de selectores

Si varios selectores van a tener el mismo estilo, es posible ahorrarse lineas de código. El siguiente ejemplo muestra como los elementos h1, h2, h3 y p tendrán siempre el mismo color.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Perfiles en Redes Sociales