Combinar los selectores CSS.

El código CSS como su nombre lo dice (de cascada) permite combinar selectores para ir más abajo en el DOM, pero para comprender este tema lo primero que vamos a hacer es ver como funciona el DOM.

El DOM (Document Object Model) está compuesto de etiquetas, unas que pueden contener a otras y algunas que no.

Las que pueden contener a otras son aquellas que abren y cierran como <div></div>, <a></a>, <section></section>, <body></body>, etc. y las que no pueden hacerlo porque abren y cierran en una sola como <br/>, <img/>, <meta/>, etc.

Cuando una etiqueta va dentro de la otra se dice que son padre e hijo y cuando van en el mismo nivel se dice que son hermanos:

En este caso tenemos una página web básica en donde:

  • <head> y <body> son hermanos por que estan en el mismo nivel,
  • <p> es hijo de <body> porque está dentro de él y
  • <body> y <head> son hijos de <html> porque estan dentro de él.

<html>

   <head>

   </head>

   <body>

        <p>Aplica a este parrafo</p>

   </body>

</html>

Ahora que sabemos como funciona el DOM podemos ver como funciona el estilo de cascada de CSS.

En CSS se pueden combinar selectores de etiquetas, clases e id para dar estilo a cada elemento como veremos en el siguiente ejemplo:

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

Como se puede ver, el CSS (resaltado) tiene como selector section div (separados con espacio) que claramente son etiquetas.

En este ejemplo todos los div que estén dentro de section van a tener color de letra rojo.

<html>

   <head>

       <style type="text/css">

            section div {

                color:#F00;

            }

        </style>

   </head>

   <body>

        <section>

                <div>

                        <div>Texto entre el div 1</div>

                        <div>Texto entre el div 2</div>

                </div>

                <p>Mi parrafo 1</p>

                <p>Mi parrafo 2</p>

                <div>Texto entre el div 3</div>

        <section>

   </body>

</html>

El resultado es el siguiente:

Texto entre el div 1

Texto entre el div 2

Mi parrafo 1

Mi parrafo 2

Texto entre el div 3

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

 

Veamos otro ejemplo sobre el mismo código pero ahora vamos a ir mas adentro en el DOM

En este ejemplo todos los div que estén dentro de div que estén dentro de section van a tener color de letra rojo.

<html>

   <head>

       <style type="text/css">

            section div div {

                color:#F00;

            }

        </style>

   </head>

   <body>

        <section>

                <div>

                        <div>Texto entre el div 1</div>

                        <div>Texto entre el div 2</div>

                </div>

                <p>Mi parrafo 1</p>

                <p>Mi parrafo 2</p>

                <div>Texto entre el div 3</div>

        <section>

   </body>

</html>

El resultado es el siguiente:

Texto entre el div 1

Texto entre el div 2

Mi parrafo 1

Mi parrafo 2

Texto entre el div 3

Como se puede ver, el último texto que es un div no tiene color rojo ya que para aplicar al CSS deberia no solo estar dentro del section sino también dentro de otro div.

Este uso es muy común, pero en muchas ocaciones un sitio web está formado por distintas zonas que tienen las mismas etiquetas, por lo que cobran fuerza el uso de las clases (class).

Por ejemplo, nuestro sitio web puede tener 2 zonas, una de contenido y otra de noticias, pero ambas pueden tener títulos y parrafos con distintos formatos.

Veremos este ejemplo en 2 partes.

En este ejemplo todos los h1 que estén dentro de section van a tener color de letra verde y un tamaño de texto de 25 pixeles.

<html>

   <head>

       <style type="text/css">

            section h1 {

                color:#0A0;

                font-size:25px;

            }

        </style>

   </head>

   <body>

        <section>

                        <h1>Título del contenido</h1>

                        <p>Texto del contenido</p>

        <section>

        <section>

                        <h1>Título de la noticia</h1>

                        <p>Texto de la noticia</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Título del contenido

Texto del contenido

Título de la noticia

Texto de la noticia

En este caso como se utilizaron solamente etiquetas y debido a que las mismas estan anidadas de la misma forma (<h1> dentro de <section>) se aplicó el estilo a ambos títulos.

 

Si lo que queremos es que se diferencie noticia de contenido, deberiamos tener estilos diferentes en cada título.

Para el siguiente ejemplo modificaremos un poco el anterior instertando clases a los section así:

<html>

   <head>

       <style type="text/css">

            .contenido h1 {

                color:#0A0;

                font-size:25px;

            }

 

            .noticia h1 {

                color:#777;

                font-size:20px;

            }

        </style>

   </head>

   <body>

        <section class="contenido">

                        <h1>Título del contenido</h1>

                        <p>Texto del contenido</p>

        <section>

        <section class="noticia">

                        <h1>Título de la noticia</h1>

                        <p>Texto de la noticia</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Título del contenido

Texto del contenido

Título de la noticia

Texto de la noticia

Por útlimo vamos a dar el mismo formato de parrafo a los textos de contenido y noticia, para lo que insertaremos un sólo código CSS adicional. Es bueno que antes de leerlo piense como sería el selector.

<html>

   <head>

       <style type="text/css">

            .contenido h1 {

                color:#0A0;

                font-size:25px;

            }

 

            .noticia h1 {

                color:#777;

                font-size:20px;

            }

            section p {

                color:#ababab;

                font-size:12px;

            }

        </style>

   </head>

   <body>

        <section class="contenido">

                        <h1>Título del contenido</h1>

                        <p>Texto del contenido</p>

        <section>

        <section class="noticia">

                        <h1>Título de la noticia</h1>

                        <p>Texto de la noticia</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Título del contenido

Texto del contenido

Título de la noticia

Texto de la noticia

Aquí se puede ver que se pueden combinar selectores para dar estilo a elementos particulares así como a generales como lo hicimos con los <p>

 

En este último ejemplo veremos como lo que hicimos en el ejercicio anterior tiene un gran valor. Para esto vamos a insertar nuevos contenidos en el HTML que automáticamente toman los estilos apropiados.

<html>

   <head>

       <style type="text/css">

            .contenido h1 {

                color:#0A0;

                font-size:25px;

            }

 

            .noticia h1 {

                color:#777;

                font-size:20px;

            }

            section p {

                color:#ababab;

                font-size:12px;

            }

        </style>

   </head>

   <body>

        <section class="contenido">

                        <h1>Título 1 del contenido</h1>

                        <p>Texto del contenido</p>

                        <h1>Título 2 del contenido</h1>

                        <p>Texto del contenido</p>

                        <h1>Título 3 del contenido</h1>

                        <p>Texto del contenido</p>

        <section>

        <section class="noticia">

                        <h1>Título 1 de la noticia</h1>

                        <p>Texto de la noticia</p>

                        <h1>Título 2 de la noticia</h1>

                        <p>Texto de la noticia</p>

                        <h1>Título 3 de la noticia</h1>

                        <p>Texto de la noticia</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Título 1 del contenido

Texto del contenido

Título 2 del contenido

Texto del contenido

Título 3 del contenido

Texto del contenido

Título 1 de la noticia

Texto de la noticia

Título 2 de la noticia

Texto de la noticia

Título 3 de la noticia

Texto de la noticia

 

 

Como se puede ver, al nombrar de forma correcta los selectores es posible que el insertar nuevos contenidos en el HTML no requierean de nuevo código CSS.

Conclusiones:

  • El uso de selectores combinados da un gran valor al CSS.
  • Utilizar etiquetas como selectores combinados no es recomendable en el uso general, pero si cuando se anidan en clases para establecer zonas de un sitio web.
  • Hay muchas formas de trabajar CSS combinado que veremos más adelante.