CSS–Selectores Adicionales

Existen otras reglas que pueden ser utilizadas para crear selectores que permiten un mayor nivel de especificidad en cuanto a los elementos HTML a los cuales se les desea aplicar determinada regla de estilo.

A continuación se muestran algunas de estas reglas:

elemento1 > elemento2

Esta regla aplica para seleccionar un elemento (2), que es descendiente directo de un elemento (1).

En las siguientes figura se muestran un archivo HTML y el archivo .css  que se referencia.

selectornew-1

selectornew-2

En el archivo miestilo5.css se están estableciendo reglas para los elementos <p>, que son descendientes de el elemento <div>.

Los elementos de listas, tanto <ul> como <ol>, asi como el elemento <p> que esta fuera del elemento <div> no son afectados por las reglas de estilo definidas, tal y como se muestra en la figura.

selectornew-3

elemento1 + elemento2

Se utiliza este selector para seleccionar un elemento (2) que esta ubicado inmediatamente después de un elemento (1).

En el documento HTML del ejemplo anterior, si quisiéramos colocar por ejemplo, el texto de color verde y en tamaño de fuente 25 pixeles.

selectornew-4

También se colocaron reglas para las elementos de listas <ul> y <ol> que son descendientes  del elemento <div>. El resultado es el que se muestra a continuación.

selectornew-5

elemento1 ~ elemento2

Este selector se utiliza para seleccionar un elemento (2) que va precedido de un elemento (1).

En el ejemplo anterior hubiésemos obtenido el mismo resultado en el elemento <p> número 3, si hubiésemos colocado el siguiente selector:

div ~ p , tal como se muestra en la siguiente figura.

selectornew-6

 

 

Referencias Bibliográficas

http://www.w3schools.com/cssref/css_selectors.asp

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s