Web.CSS.¿Que elemento se modifica?

Published in

Enredando con la WEB.

2 min readAug 25, 2016

Cuando en una página web existen muchos elementos iguales, para poder referirse a uno concreto se usaba las clases o los identificadores. Existen otras formas de referirnos a un grupo de selectores o alguno de forma individual. Observar unos ejemplos:

<!DOCTYPE html>
<html>
<head>
<style>
    div p {
        background-color: yellow;
    }
</style>
</head>
<body>    <div>
        <p>Párrafo de texto 1.</p>
        <p>Párrafo de texto 2.</p>
        <span><p>Párrafo de texto 3.</p></span>
    </div><p>Párrafo de texto 4.</p>
<p>Párrafo de texto 5.</p></body>
</html>

Si se usa dos selectores separados por espacios (div p), ésto quiere decir que la modificación sólo va afectar a los descendientes directos de div, que en este caso son los párrafos que se encuentran dentro del bloque.

<!DOCTYPE html>
<html>
<head>
<style>
    div > p {
        background-color: yellow;
    }
</style>
</head>
<body>    <div>
        <p>Párrafo de texto 1.</p>
        <p>Párrafo de texto 2.</p>
        <span><p>Párrafo de texto 3.</p></span>
    </div><p>Párrafo de texto 4.</p>
<p>Párrafo de texto 5.</p></body>
</html>

En esta caso si se usa signo de mayor (div > p), sólo va a afectar a los hijos del bloque div que sean párrafos. Es decir párrafo 1 y párrafo 2. ¿Y el párrafo 3 no?. El párrafo 3 en realidad no es hijo de div, es más bien hijo span, lo cual no afecta a la modificación.

<!DOCTYPE html>
<html>
<head>
<style>
    div + p {
        background-color: yellow;
    }
</style>
</head>
<body>    <div>
        <p>Párrafo de texto 1.</p>
        <p>Párrafo de texto 2.</p>
    </div><p>Párrafo de texto 3.</p>
<p>Párrafo de texto 4.</p></body>
</html>

Si hay dos selectores separados por un +, quiere decir en este caso, que va a modificar únicamente el elemento inmediatamente después de div; el párrafo 3.

<!DOCTYPE html>
<html>
<head>
<style>
    div ~ p {
        background-color: yellow;
    }
</style>
</head>
<body>    <div>
        <p>Párrafo de texto 1.</p>
        <p>Párrafo de texto 2.</p>
    </div><p>Párrafo de texto 3.</p>
<p>Párrafo de texto 4.</p></body>
</html>

Si hay dos selectores separados por el signo ~, quiere decir que afectará a todos los elementos p que haya fuera del div, es decir, todos aquellos elementos hermanos; párrafo 3 y 4.

Grupos de selectores.

Existe la posibilidad de darle estilos a varios selectores a la vez e incluso a varias clases a la vez. Unos ejemplos:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Se puede usar varios selectores a la vez pero separándolos mediante espacios.

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

También se pueden dar estilos a varias clases distintas a la vez, separándolas igualmente como el anterior, con espacios.

Continúa por Unidades de Medida.

Web.CSS.¿Que elemento se modifica?

Written by Ismael Royano Gómez