Botica informática: Selectores en CSS

Las hojas de estilo en cascada (CSS por sus siglas en inglés) son la forma en que actualmente se maneja la presentación de las páginas web y de otros tipos de documento. Cada estilo es una colección de pares, que nos dice a quien se aplica y cual es el estilo respectivamente. La parte que identifica los elementos a los que se aplica un estilo se llama un selector.

Selector universal

Para seleccionar todas las marcas se utiliza el selector *:

* {font-weight: bold;}

Declaraciones múltiples Se puede asignar el mismo estilo a más de un selector:

h1, h2, h3, h4, {font-weight: bold;}

En este caso, las marcas h1, h2, h3, h4 reciben el mismo estilo.

Selectores de clase

Al usar selectores de clase se puede diferenciar entre ocurrencias de la misma marca. Por ejemplo,

p.alerta {color: red}

Sólo se aplica a aquellos párrafos que con un atributo de clase que incluye la palabra alerta, por ejemplo:

<div class="alerta">
<p class="alerta">Esto va en Rojo.</p>
</div>

La diferencia de terminología puede generar confusión. En CSS hablamos del selector p y la clase alerta. En HTML hablamos del elemento (o la marca) p, el atributo class y el valor alerta.

Selectores de atributos sencillos

El más sencillo selector de atributos sólo pide la existencia de un atributo dado. Por ejemplo:

p[class] {font-style: italic;}

Se aplica a todas las marcas de párrafo que tengan definido el atributo class, sin importar su valor, por ejemplo:

<div class="rojo">
  <p class="rojo">Esto va en rojo.</p>
  <p class="advertencia">¡Esto es importante!</p>
</div>

Al combinarse el selector de atributos sencillo con el selector universal se obtiene una forma de seleccionar a todos los elementos que posean un atributo dado. En este ejemplo, se seleccionan todos los elementos que contengan un atributo class:

*[class] {font-weight: bold;}

Atributos combinados

Se puede seleccionar por la presencia de más de un atributo. Por ejemplo, se puede seleccionar las tablas que tengan borde y ancho:

table[border][width] {...}

Selección por valores de los atributos

Se puede seleccionar también por un atributo y su valor:

*[lang|="fr"] {color: blue;}

Aquí se va a escribir en azul todo aquello en donde el atributo lang comience por fr. Por ejemplo, de las líneas siguientes solo se escribe en azul la frase del primer párrafo.

<div lang="fr">
  <p lang="fr">Bon appétit!</p>
  <p lang="es-ve">¡Buen provecho!</p>
</div>

Se puede seleccionar por un atributo y parte de su valor:

p[class~="deslizante"] {color: blue;}

Selecciona cualquier párrafo cuya clase contenga la palabra deslizante, como en:

<p class="texto deslizante">Novedades</p>

Selección por id

Con el siguiente selector por ID se selecciona el elemento H1 cuyo atributo ID vale "cap1":

h1#cap1 { text-align: center }

En el próximo ejemplo, la regla de estilo se aplica al elemento cuyo ID es "z98y". Por ello va a aplicarse al elemento P:

<HEAD>
  <TITLE>Se aplica a cualquier entidad con id z98y</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Texto interesante.</P>
</BODY>

En el próximo ejemplo, sin embargo, la regla sólo se aplica a un elemento H1 cuyo ID vale "z98y". Por ello, esta regla no se aplica al elemento P:

<HEAD>
  <TITLE>Se aplica al elemento H1 con id z98y</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Texto interesante.</P>
</BODY>

Cursos relacionados

Curso HTML y CSS
Curso jQuery y AJAX

Botica informática

Páginas

lunes, 27 de septiembre de 2010

Selectores en CSS