Tipos de Selectores en CSS

Los selectores en CSS son aquellos que identifican elementos dentro de una página web para así poder aplicar estilos a sus elementos.

Los tipos de selectores abarcan desde el nombre de las etiquetas usadas en HTML hasta combinaciones que permiten diversos selectores de la página.

Existen diferentes tipos de selectores como lo son:

  • universal
  • de etiqueta
  • descendentes
  • de clase
  • de id.

TIPOS:

Selector Universal

Es aquel que se puede utilizar para identificar y modificar a todos los elementos de la pagina web.

El selector universal se declara con un asterisco (*) y dentro de las llaves se colocan las características que tomarán los elementos como se muestra a continuación.

Creamos nuestro selector * {} en el que daremos el mismo estilo margin y padding ademas de el color aqua a todos los elementos.

Selectores de Etiqueta

Los selectores de etiqueta seleccionan a los elementos cuyo nombre coincida con el nombre del elemento html.

Cuando existen diferentes etiquetas con propiedades iguales se puede enlazar separando los nombres por comas.

Ejemplo: Se le asigna un color y un formato al texto de los títulos h1, h2 y h3.

Podemos observar en el ejemplo estamos asignando un mismo estilo a las tres etiquetas.

Selectores descendentes

Son aquellos que seleccionan los elementos que se encuentran dentro de uno o mas elementos creando una mayor precisión para la selección de la etiqueta a la que se le aplicara el estilo. Estos selectores se separan por espacios en blando.

Ejemplo: Se modificara el color y la fuente de los elementos dentro de una etiqueta <p> que a su vez este dentro de la etiqueta <div>.

Un elemento no tiene que ser descendente directo de otro si no que la única condición es que el elemento debe estar dentro del otro elemento sin importar el nivel de profundidad en el que se encuentre

Selectores de Clase

Son prácticos para aplicar estilos a un solo elemento de la página ya que utilizando el atributo class se puede indicar directamente la regla CSS

Se diferencia este tipo de selector con la notación de un punto (.) antes de la palabra usada con el prefijo “class”.

Ejemplo: Al elemento <p> en su atributo class asignamos el nombre del selector creado .DeClase

Selectores de ID

Se utilizan para dar estilo a un solo elemento según su identificador único (id). Se utiliza con el atributo de id.

La sintaxis es muy parecida con los selectores de clase; la diferencia es que se utiliza el símbolo (#) en vez del (.). La diferencia  es que no se puede repetir en una misma página web.

Por ejemplo: Al elemento h3 se le da como identificador único #DeId por lo cual solo se le aplicara el estilo a este elemento. 

Es importante no confundir este selector con los anteriores:

p#DeId : Todos los elementos de tipo p con identificador unico DeId

p DeId : Todos los elementos con identificador único DeId y este dentro de alguna etiqueta p

p, DeId : Todos los elementos p y todos los elementos con identificador único DeId

Selectores Específicos

Pero ¿Cómo es posible aplicar estilos a solamente al párrafo cuyo atributo class sea igual a Estilo?

Combinando el selector de clase y el selector de tipo, para obtener un selector mucho mas especifico:

Como podemos observar el estilo solo se aplico al párrafo y no a los otros elementos. “Se puede interpretar el selector p.Estilos como Elementos de tipo <p> que dispongan de un atributo class con un valor de Estilos”

Estos fueron los diversos selectores CSS que puedes utilizar en la creación de tu página web.

 

Deja un comentario

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

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.