Está en la página 1de 3

selectores lenguaje de presentacion - Pgina web de estructurayprogramacion

Estructuras y Programacion
Inicio

Materias Comunes

Descarga de Programas en c#

Materias
Tutoriales

Descargas de material

Descarga de Presentaciones

Libro de Visitas

3.3 Selectores Lenguaje de presentacin


Search

Los selectores identifican a un elemento dentro de la pgina Web para luego poder definir sus
propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetas
usadas en HTML (BODY, P, CODE, TABLE, UL, etc.) hasta complejas combinaciones que permiten un
juego muy amplio de selecciones dentro de la pgina.
El conocimiento en profundidad de los distintos selectores es uno de los aspectos ms complejos del
lenguaje de las Hojas de Estilo y tambin el que nos permite sacar el mximo provecho de las CSS.
Existen muchos editores de pginas Web que facilitan la labor de crear y aplicar Hojas de Estilo,
pero los selectores que se pueden definir con estos programas son slo los ms elementales. La
complejidad que pueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier
herramienta y es ah donde los diseadores debern apelar a sus propios recursos.
En esta seccin se explican los llamados selectores simples.
Selectores de tipos

Son los que identifican a un tipo de elemento dentro de los que conforman el cdigo HTML. Es decir,
usan la misma palabra que la etiqueta (tag) sin los signos < y >. Por ejemplo, TABLE selecciona
todos los elementos <TABLE> de la pgina. La siguiente regla identifica a los elementos <H1> de la
pgina y los alinea centralmente:
H1 {text-align: center}
Quienes no conozcan a fondo todos las etiquetas del lenguaje HTML, pueden consultar el Listado de
elementos de HTML 4.0, que contiene una pequea definicin sobre cada marca. Tericamente al
menos, todos los elementos de ese listado pueden utilizarse como selectores en las CSS. Ver
Los selectores de tipo tienen la ventaja de que, con un simple cambio en la Hoja de Estilo, podemos
modificar el aspecto de todos los elementos de ese tipo en todas las pginas de nuestro sitio. Esa es
tambin su limitacin: su utilidad se limita al caso en que todos los elementos de un tipo tengan la
misma apariencia en cada una de nuestras pginas. Qu sucede si en ciertos casos queremos usar
un prrafo con caractersticas diferenciadas?
Selectores de clases

La cuestin planteada en el punto anterior se resuelve creando una nueva clase de prrafo. El
selector de clases consta de un punto (.) seguido por el nombre de la clase que hayamos creado (el
nombre lo elegimos nosotros). Supongamos que para publicar un reportaje queremos contar con un
prrafo especial que denominaremos "pregunta":
P.pregunta {font-weight: bold; font-style: italic}
Ahora, a los prrafos que corresponden a las preguntas del entrevistador en el supuesto reportaje
les agregamos el atributo CLASS dentro de la marca de la pgina HTML:
<P class="pregunta">Esta es una pregunta del reportero</P>
Todos los prrafos de la clase "pregunta" aparecern con texto en itlicas negritas para
diferenciarlos de los prrafos normales. Observen que en el tag de la pgina HTML la sintaxis difiere
de la CSS: luego de la palabra CLASS sigue un signo igual (=) y entre comillas ("") el nombre de la
clase.
Si bien estos selectores requieren un agregado en el cdigo HTML de las pginas, nos permiten una
amplia libertad para crear diversas variantes de un mismo elemento. Ms an, podemos crear una
clase genrica para aplicar a cualquier elemento de la pgina y no slo a los prrafos. Basta con
suprimir en el estamento el primer selector y dejar nicamente el punto (.) y el nombre de la clase:
.contraste {color: #FFFF00; background-color: #000000}

http://www.estructurayprogramacion.com/materias/programacion-web/selectores-lenguaje-de-presentacion/[31/05/2013 02:15:52 p.m.]

selectores lenguaje de presentacion - Pgina web de estructurayprogramacion

En este caso, la clase "contraste" equivale a cualquier elemento con el atributo class="contraste".
Por ejemplo:
<H1 class="contraste">Un ttulo con contraste</H1>
<P class="contraste">Un prrafo con contraste</P>
<OL CLASS="contraste">Una lista con contraste</B>
Es tanta la flexibilidad que nos brindan los selectores de clases que hasta nos permitiran hacer
nuestras pginas casi exclusivamente con slo dos elementos de HTML: DIV y SPAN (que no tienen
ningn formato predeterminado) y luego crear todas las clases que necesitemos. Esta prctica es
desaconsejada por el W3C en una nota que aparece en la Recomendacin CSS2 al final de la
seccin 5.8.3 Selectores de clases. Ver
Selectores de ID

Los selectores de ID funcionan de manera muy similar a los selectores de clases, salvo que, a
diferencia de estos ltimos, slo pueden aplicarse a un elemento de la pgina. Quiere decir que si
hay un elemento que tiene asignado el atributo ID="principal" no podr haber otro ID con igual
valor (es decir, con el mismo nombre). La sintaxis en la CSS tambin es similar, solamente que en
vez de usar un punto se utiliza el carcter de numeral (#):
H1#titulo1 {text-align: center}
#volanta {font-style: italic}
En el primer caso, aquel elemento H1 con ID="titulo1" de la pgina ser centrado. En el segundo,
cualquier elemento que tenga asignado el atributo ID="volanta" ir en itlicas.
Los selectores de ID no tienen el grado de flexibilidad de los selectores de clases, por ejemplo, pero
son una opcin para aquellos casos en que se necesite identificar de modo exclusivo un determinado
elemento de la pgina.
Selectores de atributos

Los selectores de atributos permiten seleccionar elementos de la pgina segn sus propiedades o el
valor asignado a estas propiedades. Supongamos que hemos creado varias clases de prrafos y
queremos identificar a todos aquellos que tengan especificado el atributo CLASS (cualquiera sea el
valor de ese atributo) para darle un margen izquierdo de 1 cm:
P[CLASS] {margin-left: 1cm}
Ahora, si queremos seleccionar solamente aquellos prrafos que tengan el atributo
CLASS="pregunta", debemos usar:
P[CLASS="pregunta"] {margin-left: 1cm}
Podemos usar varios selectores de atributos para hacer an ms especfica la regla. Supongamos
que a ciertos prrafos con class="pregunta" tambin le hemos asignado el atributo WIDTH y
queremos darle un margen izquierdo de 2 cm.
P[CLASS="pregunta"][WIDTH] {margin-left: 2cm}
Hemos visto dos formas que pueden tomar estos selectores: [atributo] y [atributo=valor].
Adicionalmente, existen dos frmulas para este tipo de selectores que se utilizan cuando a un
determinado elemento se le han asignado una lista de valores en vez de un solo valor (ms
adelante en esta gua veremos los casos especficos).
[atributo~=valor] se usa para seleccionar los elementos que tienen como atributo una lista de
palabras separadas por espacios, una de las cuales es exactamente valor.
[atributo|=valor] se usa para seleccionar los elementos que tienen como atributo una lista de
palabras separadas por guiones, comenzando por valor.
Veamos un ejemplo de los dos casos:
IMG[ALT~="logotipo"] {border: solid}
P[LANG|="en"] {font-family: "Times New Roman", Serif}
El primero selecciona las imgenes cuyo atributo ALT tiene en su valor la palabra logotipo, como en
ALT="logotipo de la compaa" o ALT="ste es nuestro logotipo". El segundo, selecciona los prrafos
que tienen asignado como valor del atributo LANG palabras que comienzan con en, como en-US o
en-cockney.
Quizs todo esto les parezca una complicacin excesiva, pero debe considerarse que el lenguaje de
las CSS es abarcativo e intenta satisfacer necesidades que quizs nosotros ignoramos, como puede
ser el hecho de tener de mezclar distintos lenguajes en nuestros documentos y poder aplicar a cada
uno un estilo particular. Tambin se debe tomar en cuenta que las Hojas de Estilo estn pensada no
solamente para HTML sino para otro lenguajes, como XML, para los cuales ciertos selectores pueden
resultar de mayor utilidad que en HTML.
Selector universal

El selector universal se escribe con un asterisco (*) y representa a cualquier elemento de la pgina.
Por ejemplo, con:
* {color: red}
Todos los elementos de la pgina tendrn como color de primer plano el rojo. Sin mencionarlo, ya
hemos usado en los ejemplos anteriores de esta pgina algunos selectores universales, porque
cuando ste va acompaado de otro selector se puede omitir. Por eso, los siguientes dos selectores

http://www.estructurayprogramacion.com/materias/programacion-web/selectores-lenguaje-de-presentacion/[31/05/2013 02:15:52 p.m.]

selectores lenguaje de presentacion - Pgina web de estructurayprogramacion

son exactamente iguales:


*#volanta {font-style: italic}
#volanta {font-style: italic} /* el asterisco se ha omitido */
Resulta de utilidad cuando queremos inicializar todos los elementos de nuestra pgina con
determinadas propiedades generales.
Agrupamiento

Cuando tenemos varios selectores que comparten las mismas declaraciones pueden agruparse en
una lista separada por comas (,). No se trata de un tipo de selector especial sino de una frmula
abreviada para aplicar las mismas propiedades a distintos selectores en un solo paso. Por ejemplo,
si tenemos:
H1 {font-family: Arial, Sans-serif}
P {font-family: Arial, Sans-serif}
TABLE {font-family: Arial, Sans-serif}
#volanta {font-family: Arial, Sans-serif}
Podemos simplificarlo de este modo:
H1, P, TABLE, #volanta {font-family: Arial, Sans-serif}

Aviso legal | Poltica de privacidad |

Imprimir |

Recomendar esta pgina

http://www.estructurayprogramacion.com/materias/programacion-web/selectores-lenguaje-de-presentacion/[31/05/2013 02:15:52 p.m.]