Selectores CSS. Cómo asignar código CSS a los elementos de la web.

El código CSS se puede asignar a cualquier elemento del DOM (Document objetc model) a través del atributo style, pero cuando el CSS está en el head o en un archivo aparte, es necesario utilizar selectores.

Los selectores simplemente apuntan al elemento al que se va a aplicar el CSS ya sea por su atributo id, su atributo class o directamente a la etiqueta.

Un set de reglas CSS incluye el selector, el abrir corchete ( { ), las declaraciones y por último cerrar corchete ( } )así:

 

selector {

    ...declaraciones...

}

Aplicar un selector CSS a una etiqueta:

CSS puede ser aplicado directamente a las etiquetas HTML utilizando el nombre de la etiqueta como selector.

Por ejemplo, si queremos aplicar un estilo a la etiqueta <p></p> podemos hacer lo siguiente:

En este caso tenemos una página web con el CSS insertado en el <head>.

Como se puede ver, el CSS (resaltado) tiene la letra p sin los signos de mayor que y menor que.

En este ejemplo, el selector (p) le asignará el color rojo al texto que se encuentra en la etiqueta <p>

<html>

   <head>

       <style type="text/css">

            p {

                color:#F00;

            }

        </style>

   </head>

   <body>

        <p>Aplica a este parrafo</p>

   </body>

</html>

El resultado es el siguiente:

Aplica a este parrafo

El texto se muestra rojo como resultado del codigo CSS que se apunta con el selector p.

Este uso es muy práctico cuando todas las etiquetas de un mismo tipo deben ser iguales (Ejemplo: cuando todos los parrafos <p> deben ir en gris), pero no sirven cuando alguna debe ser diferente.

 

En el siguiente ejemplo vamos a hacer lo mismo, pero tendremos varios parrafos en nuestro HTML:

En este caso tenemos una página web con el CSS insertado en el <head>.

Como se puede ver, el CSS (resaltado) tiene la letra p sin los signos de menor que (<) y mayor que (>).

En este ejemplo, el selector (p) le asignará el color rojo a los textos que se encuentra en la etiqueta <p>

<html>

   <head>

       <style type="text/css">

            p {

                color:#F00;

            }

        </style>

   </head>

   <body>

        <p>Aplica a este parrafo</p>

        <p>También a este parrafo</p>

        <p>Incluso a este parrafo</p>

        <p>Y aunque quisiera este diferente, también aplica a este</p>

   </body>

</html>

El resultado es el siguiente:

Aplica a este parrafo

También a este parrafo

Incluso a este parrafo

Y aunque quisiera este diferente, también aplica a este

Todos los parrafos se muestran rojos como resultado del codigo CSS que se apunta con el selector p.

Aplicar un selector CSS a una clase:

En HTML las etiquetas pueden tener un atributo class al que se puede apuntar con el CSS. Este atributo no debe tener espacios y se ve de la siguiente manera:

En este ejemplo tenemos una etiqueta div con un atributo class que se llama miClase.

<div class="miClase"></div>

Una etiqueta puede contener mas de una clase, por lo que es necesario separar con espacios cada una de ellas.

En este ejemplo tenemos una etiqueta div con un atributo class que incluye 3 clases distintas llamadas claseUno, claseDos y claseTres.

<div class="claseUno claseDos claseTres"></div>

Ahora que tenemos claro como se inserta una clase en una etiqueta haremos un ejemplo con estas. Cuando el código CSS apunta a una clase, el selector debe escribirse punto (.) y el nombre de la clase (miClase) así: .miClase

Utilizando uno de los ejemplos anteriores vamos a asignarle una clase a dos de los párrafos a los que les vamos a cambiar el color de letra.

Como se puede ver, el CSS (resaltado) tiene el selector .miClase

En este ejemplo, el selector (.miClase) le asignará el color rojo a los textos que tienen la clase miClase (class="miClase") y no a todos.

<html>

   <head>

       <style type="text/css">

            .miClase {

                color:#F00;

            }

        </style>

   </head>

   <body>

        <p class="miClase">Aplica a este parrafo</p>

        <p>A este no</p>

        <p>A este tampoco</p>

        <p class="miClase">También a este parrafo</p>

   </body>

</html>

El resultado es el siguiente:

Aplica a este parrafo

A este no

A este tampoco

También a este parrafo

Sólo los parrafos con la clase miClase se muestran rojos como resultado del codigo CSS que apunta con el selector .miClase

Aplicar un selector a un id:

En HTML las etiquetas pueden tener un atributo id que debe ser único en el documento y al que se puede apuntar con el CSS.

En el siguiente ejemplo se puede ver como aplicamos el id a una etiqueta.

El atributo id insertado en la etiqueta <div>:

<div id="nombreIdUnico"></div>

En el ejemplo anterior insertamos el atributo id con nombre nombreIdUnico en una etiqueta div (<div>).

Esta no es la más recomendable ya que aplica a un solo elemento en una página web (Es importante tener en cuenta la diferencia entre página web y sitio web).

 

El selector CSS que apunta a un id lleva antes el símbolo número (#).

Ahora vamos a aplicar código CSS a una etiqueta con id:

Utilizando uno de los ejemplos anteriores vamos a asignarle un id a uno de los párrafos al que le vamos a cambiar el color de letra.

Como se puede ver, el CSS (resaltado) tiene el selector #miIdUnico

En este ejemplo, el selector (#miIdUnico) le asignará el color verde al texto que tiene el id miIdUnico (id="miIdUnico") y no a todos.

<html>

   <head>

       <style type="text/css">

            #miIdUnico {

                color:#0F0;

            }

        </style>

   </head>

   <body>

        <p>Primer texto</p>

        <p>Segundo texto</p>

        <p id="miIdUnico">Tercer texto</p>

        <p>Cuarto texto</p>

   </body>

</html>

El resultado es el siguiente:

Primer texto

Segundo texto

Tercer texto

Cuarto texto

Sólo el parrafo con el id miIdUnico se muestra verde como resultado del codigo CSS que apunta con el selector #idUnico

 

 

Conclusiones:

  • Cuando se trabaja con CSS el mejor selector es el class.
  • El selector de id debe ser utilizado para elementos que se usan una vez por página (Como por ejemplo el logo del encabezado).
  • En selector por etiquetas es muy util cuando se combina con otros selectores como veremos más adelante.