Selectores básicos CSS

Hola a todos, hoy os explicaré todo lo relacionado con los selectores básicos de CSS como los tipos que hay y su formato.

El selector es la parte de la regla CSS que indica a que elemento HTML se le aplica la regla CSS.

La declaración indica que hay que hacer y el selector indica a quien hay que hacérselo.

A continuación, explicaremos los tipos de selectores:

  • Selector universal: se utiliza para seleccionar todos los elementos de la página. Se indica con un *.

ejemplo css selector universal

ejemplo html resultado selector universal

  • Selector de tipo o etiqueta: selecciona los las etiquetas  que indiquemos en el selector. Simplemente se indica escribiendo la etiqueta a la que queremos que afecte la regla CSS.

ejemplo css selector de tipo o etiqueta

ejemplo html resultado selector de tipo o etiqueta

Si queremos agrupar una misma declaración a varios selectores, simplemente  las escribimos separadas por comas.

ejemplo 2 css selector de tipo o etiqueta

ejemplo 2 html resultado selector de tipo o etiqueta

Si queremos agrupar declaraciones y a la vez queremos que tengan declaraciones concretas. Es una combinación de los dos anteriores ejemplos.

ejemplo 3 css selector de tipo o etiqueta

ejemplo 3 html resultado selector de tipo o etiqueta

  • Selector descendente: selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente cuando se encuentra entre las etiquetas de apertura y de cierre de otro elemento. Se indican separando los elementos con un espacio blanco.

ejemplo css selector descendiente

ejemplo html resultado selector descendiente

  • Selector de clase: se utiliza para seleccionar elementos específicos que nosotros indicamos después en el código HTML. En el código CSS, se indica con un punto seguido del nombre que nosotros queramos, y en el código HTML, usamos el atributo class en la etiqueta que queramos aplicar la regla CSS seguido del nombre que hemos elegido anteriormente.

ejemplo css selector de clase

ejemplo html resultado selector de clase

También podemos añadir más de un selector de clase.

ejemplo 2 css selector de clase

ejemplo 2 html resultado selector de clase

  • Selector de ID: se utilizan para seleccionar un elemento a través de un atributo id. En el código CSS, se indica con un # seguido del nombre que nosotros queramos, y en el código HTML, usamos el atributo id en la etiqueta que queramos aplicar la regla CSS seguido del nombre que hemos elegido anteriormente.

La diferencia con el selector de clase es que el atributo id debe ser distinto en cada elemento HTML (no se repite) de un mismo documento HTML, mientras que el atributo class se puede usar para varios elementos diferentes.

ejemplo css selector id

ejemplo html resultado selector id

Recordar que todos estos selectores antes mencionados se pueden combinar entre si para ser más específicos.

Espero que os sea de ayuda.

Etiquetas

Deja un comentario

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