Escolar Documentos
Profissional Documentos
Cultura Documentos
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; }
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;}
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.