¿Para qué sirven?

Nos permite seleccionar los elementos que se desea modificar.

Podemos dividir los Selectores de CSS de la siguiente manera:

Selectores Simples

CSS seleccionador del Elemento HTML

Desde CSS selecciona el o los Elementos HTML basándose en su nombre.

Es el que hemos utilizado con mayor frecuencia, si vas en orden con los temas que te propongo.

Aquí un ejemplo desde un archico CSS:

            p{
                  text-align: center;
                  color: blue;
            }

Aquí un ejemplo desde el elemento style entre las etiquetas del elemento head de HTML:

            <head>
            <style>
            p{
                  text-align: center;
                  color: blue;
            }
            <⁄style>
            <⁄head>

Nota: El formato anterios se utiliza en un archivo css externo.

El resultado sería el siguiente:

Texto de Ejemplo

CSS seleccionador de id

En HTML se puede un id para un elemento específico. La id es única lo que le permite a CSS saber que el estilo que se aplique será específico a ese elemento y no a otro.

Para que CSS seleccione el id del elemento HTML se tiene que comenzar con el caracter de número o gato # seguido de el nombre que se le asignó al elemento HTML.

Ejemplo en HTML para agregar un id a un elemento:

                  <p id=parrafo1>Texto de Ejemplo con id</p>

Con base al ejemplo anterior HTML veamos cómo seleccionar desde CSS el id.

Ejemplo desde archivo CSS para seleccionar un id de un elemento HTML

            #parrafo1{
                  text-align: center;
                  color: purple;
            }

Ejemplo desde el elemento style entre las etiquetas del elemento head de HTML:

            <head>
            <style>
            #parrafo1{
                  text-align: center;
                  color: purple;
            }
            <⁄style>
            <⁄head>

El resultado sería el siguiente:

Texto de Ejemplo

Nota: Cuando se usa en CSS la selección por id al utilizar el caracter # no puede comenzar el nombre con un número.

CSS seleccionando a partir de Clases

CSS puede seleccionar el Atributo Clase de un Elemento HTML.

Para hacerlo tenemos que agregar un punto (. ) seguido del nombre agregado con el Atributo de Clase que asignamos al elemento HTML que queremos seleccionar con CSS.

Primero agregemos el atributo Clase a el o los elementos HTML que queremos se selecciones desde CSS:

            <p>Texto de Ejemplo sin atributo class<⁄p>
            <p class="azulcentrar">Texto de Ejemplo con atributo class<⁄p>

Ahora vamos a nuestro archivo CSS y vamos a seleccionar la clase que asignamos al elemento HTML de la siguiente manera:

            .azulcentrar {
                  text-align: center;
                  color: blue;
            }

Ejemplo desde el elemento style entre las etiquetas del elemento head de HTML:

            <head>
            <style>
            .azulcentrar {
                  text-align: center;
                  color: blue;
            }
            <⁄style>
            <⁄head>

El resultado sería de la siguiente manera:

Texto de Ejemplo sin atributo class

Texto de Ejemplo con atributo class

Siguiendo con las selecciones de una Clase en HTML desde CSS podemos elegir la modificación de un elemento en específico cuando la Clase es asignada a varios elementos distintos.

Aquí tenemos un ejemplo en nuestro archivo HTML donde en un elemento de encabezado y en otro de párrafo se le asigna la misma clase:

            <h1 class=".azulcentrar">Encabezado de Ejemplo<⁄h1>
            <p class=".azulcentrar">Párrafo de Ejemplo<⁄p>

Los dos elementos anteriores tiene la misma clase asignada, pero ahora desde nuestro elemento style entre las etiquetas del elemento head donde podemos agregar código CSS o desde un archivo CSS, podemos elegir qué elemento queremos modificar aunque tengan asignada la mis clase.

Así se vería desde nuestro archivo CSS:

            p.azulcentrar {
                  text-align: center;
                  color: blue;
            }

Así se vería desde nuestro archivo HTML entre las etiquetas del elemento Style:

            <head>
            <style>
            p.azulcentrar {
                  text-align: center;
                  color: blue;
            }
            <⁄style>
            <⁄head>

Vemos cómo se agregó el caracter p que hace referencia a un párrafo en HTML antes del .azulcentrar que es la clase que le asignamos a nuestro encabezado y párrafo en el archivo HTML. Pero la p es la clave y por lo cual el resultado es el siguiente:

Encabezado de Ejemplo

Párrafo de Ejemplo

A las etiquetas HTML se les puede agregar más de una Clase

El ejemplo anterior nos permitió conocer que con una Clase asignada a un elemento HTML podemos modificarlo con CSS pero ¿Se pueden asinganar más de una Clase a un elemento HTML?

La respuesta es Sí y es de la siguiente manera:

            <p class="textoazul centrar">Es un Párrafo de Ejemplo<⁄p>

Ahora que tenemos dos Clases asignadas en un elemento HTML. ¿Cómo lo seleccionamos desde CSS?

Así se vería desde nuestro archivo CSS:

            p.textoazul {
                  color: blue;
            }

            p.centrar {
                  text-align: center;
            }

Así se vería desde nuestro archivo HTML entre las etiquetas del elemento Style:

            <head>
            <style>
            p.textoazul {
                  color: blue;
            }

            p.centrar {
                  text-align: center;
            }
            <⁄style>
            <⁄head>

Para tener una mayor claridad de cómo es que funciona, agregaremos en éste ejemplo un encabezado y un párrafo más:

            <h1 class="textoazul">Es un Encabezado de Ejemplo<⁄h1>
            <p class="textoazul">Es un Párrafo de Ejemplo<⁄p>
            <p class="textoazul centrar">Es un Párrafo de Ejemplo<⁄p>

El resultado sería el siguiente:

Es un Encabezado de Ejemplo

Es un Párrafo de Ejemplo

Es un Párrafo de Ejemplo

Combinador de Selectores

Selector de Pseudoclases

Selector de Pseudoelementos

Selector de Atributos