Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

 

3. Selectores (II)

3.2 Agrupación de selectores.

Los selectores pueden agruparse para formar nuevos tipos de selectores. De esta manera podemos seleccionar varios tipos de etiquetas al mismo tiempo o hacer una selección más específica de algunas etiquetas.

Combinación de selectores

Cuando se quiere apicar el mismo estilo a varias etiquetas distintas, no es necesario escribir una regla CSS para cada etiqueta, sino que podemos combinar los selectores para que la misma declaración pueda aplicarse a varios selectores al mismo tiempo, para ello basta con escribir los selectores separados por comas: Ejemplo:

h1, h2, h3 { text-align: center; color: navy; }

En este ejemplo estamos aplicando el estilo tanto a las etiquetas h1, como a las etiquetas h2, como a las etiquetas h3, con lo cual en una sóla regla estamos aplicando el estilo a tres tipos de etiquetas diferentes.

Podemos combinar todo tipo de selectores, siempre que vayan separados por comas; ejemplo:

#seccion1, .tipo1, h4 { font-style: italic; }

En este ejemplo se mostrarán en cursiva todas las etiquetas que tengan el atributo id="seccion1"; todas las etiquetas con el atributo class="tipo1" y todas las etiquetas h4

Selector descendente

Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre de dicho elemento, es decir cuando está dentro del otro elemento. El selector descendente selecciona los elementos descendentes que se encuentran dentro de otras etiquetas. ejemplo:

p em { text-decoration: underline; }

En este ejemplo se seleccionan todas las etiquetas em que estén contenidas dentro de las etiquetas p, pero no afectará a las etiquetas em que no estén contenidas en una etiqueta p

En el selector descendente se escriben todos los elementos seguidos, separados unicamente por espacios. El elemento afectado sólamente es el último, y los demás indican dentro de qué etiquetas está el elemento afectado. Podemos combinar más de dos selectores para formar un selector descendente, pero el elemento afectado sólo será el último. ejemplo:

#sección1 .tipo2 p span { color: red; }

En este ejemplo sólo se verán afectados los elementos con la etiqueta span, que estén contenidos en una etiqueta p, y a su vez estén contenidos en la etiqueta con la clase tipo2 y a su vez dentro de la etiqueta con ld sección1.

Una caracteréstica es que no hace falta ser descendiente directo para que el elemento esté seleccionado, así por ejemplo el selector

p span { font-family: verdana; }

afectará por igual a las etiquetas span de las dos líneas siguientes:

<p>texto en<span>letra verdana</span></p>

<p><em>texto en<span>letra verdana</span></em></p>

El selector descendente es uno de los más usados, ya que permiten mejorar la precisión de los otros selectores. Así, utilizando el selector descendente es posible aplicar diferentes estilos a elementos del mismo tipo.

Selector de etiqueta de clase

Este selector es un selector de etiqueta, que ademas restringe su aplicación a la condicion de llevar el atributo de clase o de id que se le indica. Ejemplo:

p.tipo1 { border: 1px solid blue; }

El selector selecciona únicamente a las etiquetas p que lleven el atributo class="tipo1": <p class=tipo1">...<p>

Obsérvese que no es lo mismo el selector p.tipo1 que el selector p .tipo1 (con un espacio entre medio), ya que el segundo es un selector descendente, que indicaría que se seleccionan las etiquetas incluidas dentro de <p>, que lleven el atributo class="tipo1"; pero no a la propia etiqueta <p>, aunque lleve el atributo.

De idéntica manera este selector se puede aplicar con el atributo id: ejemplo:

p#sección1 { font-family: arial; }

En este caso el selector afectaría a la etiqueta <p id="sección1"> ...</p>

La siguiente página de ejemplo ha utilizado código CSS ya conocido, incluyendo algunos de los selectores vistos anteriormente:

Página de ejemplo

Si quieres ver el código de la página del enlace anterior, bien sea por echarle un vistazo, o por copiarte la página, pulsa en el siguiente enlace:

Código de página de ejemplo

---

En la siguiente página veremos otros selectores que aunque su uso no es muy corriente, a veces hay que tenerlos en cuenta.

Selectores avanzados.

---

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com