soy Kseso y esto EsCSS

@page :nth( ) Selector Css de página en medios paginados

Las novedades en la gestión y manejo con Css de los medios impresos o paginados. Entre otras cómo seleccionar una página determinada o un grupo de ellas con el selector @page :nth( )

@page :nth( ) Selector Css de página en medios paginados

·Por Kseso ✎ 1
@page :nth( ) Selector Css de página en medios paginados

Las especificaciones de Css tienen un grupo o apartado dedicado en exclusiva a controlar el contenido de los documentos cuando su salida es un medio paginado. Hace ya un tiempo le dediqué un artículo (Estilos Css para imprimir: La regla @page en los medios paginados) que si bien está plenamente vigente no recoge, como es lógico, las novedades que el consorcio ha ido añadiendo.

Recientemente fue publicado el módulo CSS Generated Content for Paged Media (status WD) que desarrolla algunos aspecto relacionados con los medios paginados y el contenido generado por Css en ese medio.

Entre otras novedades hay alguna que merece la pena, a mi entender, tener presente e ir conociendo por su practicidad y posibilidad de uso para aquellos que tengáis que lidiar con salidas impresas.

Seleccionar cualquier página o grupo de ellas

Css ya definía algunas pseudoclases para el control de la primera página @page :first, y las páginas a izquierda y derecha, @page :left y @page :right respectívamente además de @page :blank para las páginas en blanco que pueden surgir por los page break forzados.

Ahora en el documento del que te hablo desarrolla una nueva pseudoclase para poder seleccionar desde la hoja de estilos cualquier página o grupo de ellas: el selector @page :nth( ).

Nota que en el uso de todas estos selectores hay un espacio en blanco precediendolos.

@page :nth(1)
Selecciona la primera página del documento. Equivalente a @page :first
@page :nth(2n)
Selecciona todas las páginas pares.

El selector :nth( ) funciona y admite operadores de la misma forma que lo hace al declararse a cualquier otro elemento.

Cuando el selector :nth( ) se aplica a una página y esa página pertenece a un grupo (page-group) selecciona la enésima página dentro del grupo, no del documento.

Grupos de páginas

Muchos documentos paginados tienen una estructura que se repite: capítulo -> sección --> apartados... Css no contemplaba este hecho y no tenía forma de apuntar a las páginas en función de estos grupos.

Estos grupos se crean de forma automática tras un salto de página forzado (break page). Ahora también es posible hacerlo a voluntad.

div { page: A } child { page: B }
Frupos de páginas en Css paginado
Origen de la imagen: W3c

Cada div crea el grupo de páginas "A" y sus hijos (elementos <child>´s en la imagen) el grupo de páginas "B". Una misma página puede pertenecer a distintos grupos como ocurre con la 5ª página de la imagen. Así es posible acceder a ella desde la hoja de estilos con diferentes selectores:

@page :nth(5 of A)
Selecciona cada 5ª página de los <div>´s
@page :nth(1 of B)
Selecciona la primera página de cada <child>
@page :nth(5)
Selecciona la 5ª página del documento.

Otras novedades

Este documento además viene con otras novedades igual de interesantes o más que éstas. Entre otras la generación de encabezados y notas a pie de página con su contenido mediante Css.

Si le echas un vistazo también podrás informarte sobre las funciones content(), string() y las referencias cruzadas dentro del documento target-counter() o las marcas o Bookmarks. Entre otras.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso