Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

18 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
jueves, 7 de junio de 2007
En el post anterior recogía selectores CSS
básicos
, aquellos que pueden usarse con cualquier navegador sin llevarse sorpresas. En esta entrega vamos a continuar con ellos e introduciremos algunos más avanzados que no funcionan con todos los browsers pero que resulta altamente interesante conocer.


Subselectores de estado

Utilizados principalmente en los enlaces (etiquetas
<a>), permiten indicar distinta presentación dependiendo del estado en el que se encuentren los mismos. Se indican siempre acompañando al selector principal al que se aplican, seguido por dos puntos y el subselector a aplicar. Tenemos los siguientes:


  • Enlaces no visitados (a:link)

  • Enlaces visitados previamente (a:visited)

  • Enlaces activos, al pulsar sobre ellos (a:active)

  • Enlaces bajo el puntero del ratón (a:hover)

  • Enlaces con el foco activo (a:focus)



a:hover
{
/* Al pasear el ratón ... */
color: red; /* por encima, se pone rojo */
}
a:active
{
color: blue; /* Al pulsarlo, pasa a azul */
}

La verdad es que algunos de ellos no tienen sentido fuera de enlaces, pero otros sí.
De hecho, es perfectamente posible utilizar un selector p:hover e indicar los atributos a aplicar a todo el párrafo cuando se pasee el ratón por encima. Lo mismo ocurre para el foco, que podría aplicarse a elementos de tipo <input>. Sin embargo, la terrible implementación de CSS en Internet Explorer 6 no los contempla, por lo que no están demasiado difundidos estos usos. Menos mal que IE7, aunque esté lejos de ser un virtuoso, ha mejorado esta compatibilidad.


Subselector de idioma

Permite seleccionar aquellos elementos cuyo contenido está en un idioma determinado, y, eso sí, hayan sido marcados convenientemente para identificarlo con el atributo lang. Sin embargo, su dispar aceptación por los navegadores e incluso las distintas formas de expresar el idioma en una etiqueta (lang o xml:lang) hace que no sea fácil ponerlo en práctica. El siguiente ejemplo funciona en Firefox, pero no en IE6-7:

p:lang(en)
{
/* Los párrafos en inglés, */
color: red; /* siempre en rojo */
}


Subselector de primer carácter

Selecciona el primer carácter del contenido de los elementos apuntados por el selector principal. No funciona bien en IE6, pero sí en el resto de navegadores medio decentes (Firefox, Safari, Opera, Konqueror e incluso IE7).

p:first-letter
{
/* La primera letra, como */
color: red; /* siempre, en rojo */
}


Subselector de primera línea

Todo lo dicho con el anterior resulta igualmente válido, a diferencia de que los estilos indicados se aplican a la primera línea del contenido.

p:first-line
{
/* La primera línea del */
color: blue; /* párrafo, color azul, */
/* por cambiar un poco. */
}


Subselectores de contenido previo y posterior

Estos interesantísimos selectores permiten modificar el contenido de la página justo antes del elemento apuntado por el selector principal o justo después de éste. ¿Qué quiere decir esto? Pues que podemos modificar el contenido de la página desde la hoja de estilos CSS, aunque pueda poner un poco los pelos de punta. La pena es que los hermanos IE no lo reconocen :-/.

p.ojo:before
{
/* Todos los párrafos */
/* de clase "ojo" */
content: "OJO: "; /* irán precedidos por */
/* el texto "OJO:" */
}
p.ojo:after
{
/* Todos los párrafos */
/* de clase "ojo" */
content: "FIN"; /* irán seguidos de */
/* el texto "FIN" */
}


Creo que con esto tenemos suficiente por hoy.
En el próximo post seguiremos profundizando en el escalofriante mundo de los selectores avanzados... la diversión está asegurada.

5 Comentarios:

Anónimo dijo...

Vaya, quizás seas capaz de echarme un cable con un problemilla que tengo relacionado con esto. En mi blog puse en la hoja de estilos una opción para que la primera letra del primer párrafo de cada artículo usara un estilo distinto, para cambiarle el color y tal. El problema que tengo es que, cuando quiero incluir una imagen flotante a la derecha de forma que el texto se disponga a su alrededor, he de ponerla antes que el texto, por lo que lo que ya no me hace el cambio de fuente de la letra. Seguro que puede implementarse bien, pero mis conocimientos de CSS son bastante mínimos, más basados en búsquedas puntuales, mirar otras páginas y tal que en un estudio decente del tema.
Gracias por leer el comentario, en todo caso.

josé M. Aguilar dijo...

¡Hola!

Ante todo, gracias por comentar.

No sé si he llegado a entender tu problema... en cualquier caso, entiendo que te refieres a que en el interior de un párrafo <p> que tienes decorado desde el CSS para que te modifique la presentación de la primera letra (:first-letter) introduces una imagen, por lo que la primera letra deja de ser el contenido directo del párrafo. ¿Es eso?

Si es así, se trata de una imposición del estándar CSS que puedes ver en la especificación CSS 2.1 respecto a :first-letter, que dice textualmente "The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line". En otras palabras, parece que lo que pretendes hacer no es posible, que el selector se aplica sólo al primer carácter de la primera línea siempre que esté precedido por otro elemento como imágenes, etc.

He hecho una prueba rápida y puedes evitarlo sacando la imagen del <p>. Por ejemplo, puedes crear un <p> (o <div>) envolviendo el anterior, e introducir la imagen y acto seguido el texto. El efecto (visualmente) es el mismo, y la primera letra aparece decorada perfectamente.

Espero haberte servido de ayuda.

Un saludo.

Anónimo dijo...

Gracias por la respuesta :)
A ver, te explico, el problema es que con la bitácora quería que se hiciera el efecto sin tener que meter a mano la etiqueta cada vez. Te pego el enlace al código de una entrada con imagen para que podamos verlo:
http://pizarra.softlibre-es.com/codigo-61.html
Y el css que se le aplica:
http://pizarra.softlibre-es.com/codigo-62.html

El enlace al artículo en cuestión sería:
http://lordtaran.eniac2000.com/?p=711

Y si no se puede por ahí ¿hay alguna otra manera de hacer que la imagen se sitúe flotando a la derecha, arriba, que no conlleve ponerla al principio?

josé M. Aguilar dijo...

Hola de nuevo.

A la vista del código que citas creo que, efectivamente, era el caso que te comentaba anteriormente. Por tanto, con el estándar hemos topado, amigo.

En mi opinión, para poder hacer el efecto que buscas vas a tener que usar algún rodeo, y sólo se me ocurren metiendo código a mano.

O bien metes un <p> que contenga tanto la imagen flotando como el <p> original con el texto, como ya te conté, o bien metes la primera letra (a mano) en el interior de un <span class='primera'> (o similar) y aplicas atributos ahí.

Siento no poder darte ninguna solución menos artesana.

Saludos.

Anónimo dijo...

Es más o menos lo que esperaba, pero no perdía nada por intentarlo ;) Probablemente use la estratagema del span, para los casos en los que meta una imagen.
Muchas gracias por las respuestas, y por los artículos :=)