1. Desarrollo web con Flash Práctica 6
Práctica 6: Selectores, herencia, orden y peso
Estructuras de una página
Los selectores indican a que código html afecta cual regla, sirven para crear un código ordenado,
limpio y fácil de mantener.
1. Selector universal: Aplica las propiedades de la regla a cualquier elemento HTML.
2. Selector de tipo: Aplica las propiedades de la regla a los elemento XHTML que nombra.
<p>Lorem ipsum . . . </p>
3. Selector de Clase: Aplica las propiedades de la regla a los elemento XHTML en base al
nombre de su atributo class.
<p class="intro">Lorem ipsum . . . </p>
4. Selector de ID: Aplica las propiedades de la regla a los elemento XHTML en base al
nombre de su atributo id. Este nombre tiene que ser único en la página.
<p id="intro">Lorem ipsum . . . </p>
5. Selectores en Grupo: Podemos agrupar varios selectores separados por comas como
declaración de selector de una regla.
<p>... </p> <div> ... </div> <ul> ... </ul>
Ing. Hugo Mendieta Pacheco 1

2. Desarrollo web con Flash Práctica 6
6. Selector Descendente: Aplica las propiedades de una regla a los elementos que están
dentro de otro elemento.
<div>
<p>Lorem ipsum... </p>
</div>
7. Selector Hijo: Aplica las propiedades de la regla a los elementos que sean hijos inmediatos
de su padre.
<div>
<a href=""> ... </a>
<p><a href=""> ...</a></p>
</div>
8. Selector Adyacente: Aplica las propiedades de la regla a los elemento inmediatamente
precedidos por un elemento hermano.
<p> . . . </p>
<p> . . . </p>
<p> . . . </p>
9. seudo clase:
• Selector pseudo-clase :link, aplica las propiedades de la regla a los links no visitados.
• Selector pseudo-clase :visited, aplica las propiedades de la regla a los links no
visitados.
• Selector pseudo-clase :active, aplica las propiedades de la regla a los links no
visitados.
Ing. Hugo Mendieta Pacheco 2

3. Desarrollo web con Flash Práctica 6
• Selector pseudo-clase :hover, aplica las propiedades de la regla a los links no
visitados.
10. Selector pseudo-elemento First letter: Aplica las propiedades de a regla a la primera letra
de un elemento.
<p> . . . </p>
11. Selector pseudo-elemento First line: Aplica las propiedades de a regla a la primera línea de
un elemento.
<p> . . . </p>
Herencia
Los atributos de las etiquetas se heredan acorde al del padre.
Practica 1:
En la página herencia.html, siga las indicaciones del instructor para cambiar los elementos
mediante los atributos de clase.
Orden de lectura
Solución a conflictos con las reglas:
Practica 2:
Abra la página conflictos.html, y siga las indicaciones del instructor:
• Coloque css mediante un archivo vinculado.
• Sobre escriba mediante CSS internos.
• Agrege css en línea, para sobre escribir los anteriores.
• Mediante CSS internos, verifique la aplicación de las reglas.
Ing. Hugo Mendieta Pacheco 3

4. Desarrollo web con Flash Práctica 6
Peso de los Selectores
Practica 3:
En el archivo peso.html, realice las siguientes actividades:
• Escriba un selector de tipo.
• Sobre escriba el selector de tipo con un selector de clase.
• Implemente un selector de id, para sobre escribir a los anteriores.
• Escriba un selector combinado.
Ing. Hugo Mendieta Pacheco 4