You are on page 1of 5

Selector descendente y Atributo CLASS o selector de clase

Selector descendente.
Un selector descendente es cuando se seleccionan los elementos que se encuentran dentro
de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las
etiquetas de apertura y de cierre del otro elemento.
Por ejemplo: p span { color:red; } este selector selecciona todos los elementos <span> de la
pgina que se encuentren dentro de un elemento <p>:
Si el cdigo HTML de la pgina es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
La etiqueta <span> permite agrupar varios elementos en lnea seguidos dentro de un
mismo bloque (por ejemplo, varias palabras seguidas en un prrafo), para despus darles
formato con la hoja de estilo.
La etiqueta <span> se utiliza para asignar un nombre a un trocito de un elemento de nuestra
pgina web. Cuando el navegador vea que ese trozo de elemento tiene asignado un nombre,
ir a ver si existen definidos algunos estilos para l y en caso de encontrar alguno, los
aplicar.
Por ejemplo:
<p>El primer servidor web de la historia se instal en el CERN en
<span>diciembre de 1990</span>Al final de los aos 80, Tim Berners-Lee invent la World
Wide Web utilizando este ordenador como el primer servidor web.<p>
span {
font-style: oblique;
text-decoration: underline;
}
El selector p span selecciona tanto texto1 como texto2.Al resto de elementos <span> de la
pgina que no estn dentro de un elemento <p>, no se les aplica la regla CSS anterior: p
span { color:red; }
Con un selector descendente es posible aplicar diferentes estilos a los elementos del
mismo tipo. El siguiente ejemplo muestra de color azul todo el texto de
los <span>contenidos dentro de un <h1>:
h1 span { color:blue; }

Los elementos <span> que se encuentran dentro de un elemento <p> se muestran


de color rojo.

Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran


de color azul.

El resto de elementos <span> de la pgina, se muestran con el color por defecto


aplicado por el navegador.

Los selectores descendentes siempre estn formados por dos o ms selectores


separados entre s por espacios en blanco. El ltimo selector indica el elemento sobre el
que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se debe
encontrar ese elemento.

Por ejemplo, este selector descendente se compone de tres selectores:


p a span { text-decoration:underline; }
Los estilos de la regla anterior se aplican a los elementos de tipo <span>, que a su vez se
encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de
tipo <p>.
Otro ejemplo:

p a span em { text-decoration: underline; }


No podemos confundir el selector descendente con la combinacin de selectores:
/* El estilo se aplica a todos los elementos "p", "a", "span", van separados por comas*/
p, a, span { text-decoration:underline;}
/* El estilo se aplica solo a los elementos "span" que se encuentran dentro de "p a " */
p a span { text-decoration:underline;}
Atributo Class
Este atributo nos permite asignar estilos a un documento sin preocuparnos de los elementos
concretos a los que se aplicarn, pero debemos modificar el cdigo HTML del documento,
incluyendo atributos CLASS en los lugares donde queramos aplicar estilos.
Si se considera el siguiente cdigo HTML de ejemplo:
<body>
<p>En un lugar de la mancha.</p>
<p>De cuyo nombre no quiero acordarme...</p>
<p>No ha mucho que viva</p>
</body>
Cmo se pueden aplicar estilos CSS slo al primer prrafo? El selector universal (*) no se
puede utilizar porque selecciona todos los elementos de la pgina. El selector de tipo o
etiqueta (p) tampoco se puede utilizar porque seleccionara todos los prrafos. Por ltimo, el
selector descendente (body p) tampoco se puede utilizar porque todos los prrafos se
encuentran en el mismo sitio.
Una de las soluciones ms sencillas para aplicar estilos a un solo elemento de la pgina
consiste en utilizar el atributo class de HTML sobre ese elemento para indicar
directamente la regla CSS que se le debe aplicar:
<body>
<p class="destacado"> En un lugar de la mancha...</p>
<p> De cuyo nombre no quiero acordarme...</p>
<p> No ha mucho que viva...</p>
</body>
A continuacin, se crea en el archivo CSS una nueva regla llamada destacado con
todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este

selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto
(.):
.destacado { color: red;}
El selector . destacado se interpreta como "cualquier elemento de la pgina cuyo
atributo class sea igual a "destacado", por lo que solamente el primer prrafo cumple esa
condicin.
El punto inicial es necesario para mantener la definicin de este estilo desvinculada de
cualquier elemento del documento. En ocasiones, es necesario restringir el alcance del
selector de clase. En el ejemplo anterior:
<body>
<p class="destacado">En un lugar de la Mancha...</p>
<p>De cuyo nombre <a href="#" class="destacado">no quiero</a> acordarme...</p>
<p>No ha mucho <em class="destacado">que </em> viva...</p>
</body>
El elemento <em> y </em> es el apropiado para marcar con nfasis las partes importantes
de un texto.
Combinando el selector de tipo y el selector de clase, se obtiene un selector mucho ms
especfico:
p.destacado { color: red }
El selector p.destacado se interpreta como "aquellos elementos de tipo <p>que dispongan
de un atributo class con valor destacado".
No debe confundirse el selector de clase con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }

/* Todos los elementos con atributo class="aviso" que estn dentro de cualquier elemento de
tipo"p"*/
p .aviso { ... }

/* Todos los elementos "p" de la pgina y todos los elementos con atributo class="aviso" de
la pgina */
p, .aviso { ... }
El nombre del estilo puede ser un nombre inventado por nosotros, o el nombre de una
etiqueta HTML. Para poder utilizar un nombre inventado, tiene que estar precedido por un
punto, o por el nombre de una etiqueta seguida de un punto.
Por ejemplo, en una hoja de estilo podramos tener lo siguiente:
body{background-color: #006699; font-family: Arial,Helvetica;}

.mitexto{font-family: Arial,Helvetica; font-size:18px;}


Si vinculramos esta hoja de estilo a un documento, se aplicaran directamente las
propiedades especificadas para la etiqueta <body>.
En cambio, no existe ninguna etiqueta <mitexto>, por lo que para aplicar este estilo a algn
elemento de la pgina habra que indicarlo de algn modo. Para aplicar este estilo a un
elemento, habra que insertar el atributo class en su etiqueta.
Por ejemplo, para aplicar ese estilo al siguiente prrafo del documento:
<p>texto con estilo</p>
Habra que escribir:
<p class="mitexto">texto con estilo</p>
Pero para aplicar el estilo nicamente a una parte del contenido de la etiqueta, como
podra ser en este caso una palabra del prrafo, sera necesario incluir la
etiqueta <span> (que agrupa bloques, sin producir un cambio de lnea). Por ejemplo, para
aplicar el estilo nicamente a la palabra estilo, habra que escribir:
<p>texto con <span class="mitexto">estilo</span></p>

Selectores de ID
Este selector se utiliza para aplicar estilos CSS a un nico elemento de la pgina. Aunque
puede utilizarse un selector de clase para aplicar estilos a un nico elemento, este selector
es ms eficiente.
El selector de ID permite seleccionar un elemento de la pgina a travs del valor de su
atributo id. Este tipo de selectores slo seleccionan un elemento de la pgina porque el
valor del atributo id no se puede repetir en dos elementos diferentes de una misma
pgina.
El atributo .id(identificador) se utiliza de la misma forma que el atributo .class, sirve
para identificar de forma nica una determinada etiqueta CSS. En el archivo html la etiqueta
se representara: <h1 id="tituloprincipal"> y en el archivo CSS :#tituloprincipal {background:
gray;}
La principal utilidad es que es accesible desde cdigo JavaScript para poder realizar cambios
dinmicos en la pgina. Se pueden utilizar ambas modalidades a la vez, pero tiene
prioridad .id sobre .class, en el caso de que se utilizaran las dos en la misma etiqueta.
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que
se utiliza el smbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la
regla CSS:
#destacado { color: red; }
<p>Primer prrafo</p>
<p id="destacado">Segundo prrafo</p>
<p>Tercer prrafo</p>
La recomendacin general es la de utilizar el selector de ID cuando se quiere aplicar un
estilo a un solo elemento especfico de la pgina y utilizar el selector de clase cuando
se quiere aplicar un estilo a varios elementos diferentes de la pgina HTML. En una

misma pgina, el valor del atributo id debe ser nico, de forma que dos elementos diferentes
no pueden tener el mismo valor de id.
No debe confundirse el selector de ID con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo id="aviso" */
p#aviso { ... }

/* Todos los elementos con atributo id="aviso" que estn dentro de cualquier elemento de
tipo "p"*/
p #aviso { ... }

/* Todos los elementos "p" de la pgina y todos los elementos con atributo id="aviso" de la
pgina*/
p, #aviso { ... }
Ejercicio de selectores: A partir del siguiente texto, generar el cdigo html y despus aadir
los selectores css para aplicar los estilos.
Son 4 prrafos, el texto azul y subrayado son enlaces vacios (os recuerdo... <a href="#">.....
</a>) y para el texto en cursiva se utiliza la etiqueta <em>....</em>.
Recordamos la etiqueta <div>...</div>, es para definir un bloque de contenido o seccin de
pgina y poder aplicarle diferentes estilos.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit nibh at felis. Sed nec diam in
dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis molestie, lorem sem aliquam nulla, id lacinia
velit mi vestibulum enim.
Phasellus eu velit sed lorem sodales egestas. Ut feugiat. Donec porttitor, magna eu varius luctus, metus
massa tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis risus. Maecenas dictum, nibh
vitae pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin aliquam
convallis ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Nunc aliquet. Sed eu metus. Duis justo.
Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, enim id iaculis congue, orci justo ultrices
tortor, quis lacinia eros libero in eros. Sed malesuada dui vel quam. Integer at eros.