Selectores

Descripción de los ejemplos

La hoja de estilos genérica de esta página consta de diez reglas para medios de pantalla, cada una de las cuales hace uso de selectores o combinaciones de selectores procedentes de los tres niveles de CSS:

ul ul { list-style-type:square; }: Aplica un tipo de viñeta diferente para las listas que a su vez estén dentro de otra lista desordenada. Al igual que la mayoría de las reglas, afecta especialmente a la lista del ejemplo que incluye este documento.
body>ul>li { font-size:0.85em; }: Como puede observarse la combinación de dos selectores de hijos seguidos es posible. En este caso se usa para especificar un tamaño de fuente para los elementos directos de las listas ordenadas que sean a su vez descendientes directas del cuerpo del documento. Esto evita que, al ser el tamaño especificado relativo, sucesivas listas anidadas tengan el tamaño de letra cada vez más pequeño.
h2+h3 { margin-top:0; }: Anula el margen superior de los encabezados de nivel 3 cuando van inmediatamente después de otro de nivel 2.
li>em~em { color:#AAA; }: De nuevo una combinación para seleccionar los elementos em adyacentes directos de otro em (en la práctica el segundo, el tercero, etc.) descendientes directos de un elemento li. (El selector de adyacentes indirectos forma parte de CSS3)
*[onclick] { border:outset; }: Establece un borde para cualquier elemento que tenga establecido el atributo onclick.
.Verde { color:#0A0; } .Grande { font-size:1.5em; } .Tachada { text-decoration:line-through; }: Estas tres reglas utilizan selectores de clase para diferentes propiedades. En el ejemplo hay diferentes elementos con una sola de las clases, con dos e incluso con las tres a la vez. Recordemos que el atributo class de HTML admite una lista de nombres de clase separados por espacios.
*[lang|="xx"] { background-color:#DEC; }: Un selector de atributo de valor inicial nos sirve en este caso para seleccionar elementos cuyo código de lenguaje sea "xx" (experimental) independientemente de su subcódigo.
li[title*="establecido"] { border-bottom:2px dashed #00C; }: Define un border inferior para todos aquellos elementos de lista cuyo título contenga la cadena "establecido". (CSS3).

Ejemplos

Encabezado de nivel 3

Otro encabezado de nivel 3

Elemento de lista
Énfasis inicial, seguido de otro, y otro...
Elemento de lista
- Elemento de lista anidada
- Elemento de lista anidada
Elemento de lista cuyo título es: "El atributo title de este elemento ha sido establecido".
Elemento de lista
Elemento de lista cuyo título es: "El atributo title de este elemento existe".
Este enlace posee atributo onclick, este elemento span también, pero este otro enlace no.
Elemento de lista
Este elemento de lista es de la clase "Grande".
Este elemento de lista es de la clase "Verde".
Este elemento de lista no tiene clase, pero esta palabra es de la clase "Grande".
Este elemento de lista es de la clase "Tachada".
Este elemento de lista es de la clase "Grande" y también de la clase "Tachada".
Este elemento de lista pertenece a las clase "Grande", "Verde" y "Tachada".
Elemento de lista cuyo título es: "El atributo title de este elemento también ha sido establecido".
Elemento de lista
e£3|\/|€µTØ ðE |_¦§†4.
List element.
Otnemele ed atsil.

Resultado esperado

Resultado esperado de la aplicación de estilo según nivel 2, tal y como describe en el texto.
CSS2

Resultado esperado de la aplicación de estilo según nivel 3, tal y como describe en el texto.
CSS3

Las imágenes ilustran el aspecto aproximado del ejemplo que deberían mostrar los navegadores con soporte para medios de pantalla CSS2 y CSS3 respectivamente:

El espacio entre el encabezado que reza "Ejemplos" y el primer encabezado de nivel 2 debe ser mínimo, mucho menor que el existente entre éste y el segundo encabezado de nivel 2. La lista, por su parte, debe incluir diferentes elementos que tienen alguna peculiaridad, como elementos em de color gris (CSS3), una línea inferior discontínua (CSS3), elementos con borde, cambios de color o de tamaño, efectos de tachado, fondos de otro color...

Código HTML empleado (extracto)

<h2 id="Ejemplos">Ejemplos</h2> <h3>Encabezado de nivel 3</h3> <ul> <li> <em>énfasis inicial</em>, seguido de <em>otro</em>, y <em>otro</em>... </li> <li title="El atributo title ... establecido"> Elemento de lista cuyo... </li> <li> Este <a onclick="...">enlace</a> ... este <span onclick="...">elemento span</span>... </li> <li class="Grande"> Este elemento de lista... </li> <li class="Verde"> Este elemento de lista... </li> ... pero esta <span class="Grande">palabra</span>... </li> <li class="Tachada"> Este elemento de lista... </li> <li class="Grande Tachada"> Este elemento de lista... </li> <li class="Grande Verde Tachada"> Este elemento de lista... </li> <li title="El atributo title ... establecido"> Elemento de lista cuyo... </li> <li lang="xx-jaquer"> e£3|\/|€µTØ ... </li> <li lang="xx-severla"> Otnemele ed atsil. </li> </ul>

· tierra de nómadas · tallerWeb · debates · recortes · diccionario · búsqueda · contactar ·

Estás en: tierra de nómadas > tallerWeb > Principios básicos de CSS > Selectores

Volver a: Principios básicos de CSS.