¿Cómo solo mostrar ciertas partes con CSS para Imprimir?

Tengo una página con muchos datos, tablas y contenido. Quiero hacer una versión impresa que solo muestre muy pocas cosas seleccionadas.

En lugar de escribir otra página solo para imprimir, estaba leyendo sobre la función de CSS para “@media print”.

Primero, ¿qué navegadores lo admiten? Como se trata de una función interna, está bien si solo los últimos navegadores lo admiten.

Estaba pensando en etiquetar algunos elementos DOM con una clase “imprimible”, y básicamente aplicar “mostrar: ninguno” a todo excepto a aquellos elementos con la clase “imprimible”. ¿Eso es factible?

¿Cómo logro esto?

EDITAR: Esto es lo que tengo hasta ahora:

 @media print { * {display:none;} .printable, .printable > * {display:block;} }  

Pero esconde todo. ¿Cómo puedo hacer visibles esos elementos “imprimibles”?

EDITAR: Probar ahora el enfoque negativo

  @media print { body *:not(.printable *) {display:none;} }  

Esto se ve bien en teoría, sin embargo, no funciona. Tal vez “no” no es compatible con CSS avanzado …

Comience aquí . Pero básicamente lo que estás pensando es el enfoque correcto.

Gracias, ahora mi pregunta es: ¿Cómo aplico CSS a una clase Y TODOS SUS ELEMENTOS DESCENDIENTES? Para que pueda aplicar “display: block” a lo que esté en las zonas “imprimibles”.

Si un elemento está configurado para display:none; todos sus hijos estarán ocultos también. Pero en todo caso. Si desea que se aplique un estilo a todos los hijos de otra cosa, haga lo siguiente:

 .printable * { display: block; } 

Eso aplicaría el estilo a todos los niños de la zona “imprimible”.

Casi todos los navegadores lo admiten. Puede ser ventajoso usar el atributo de media en la etiqueta de link .

Usando la display: none; en algunas de sus reglas sería una forma apropiada de manejar su situación.

Una manera simple:

  

Llegué aquí porque tenía curiosidad por imprimir un gráfico generado por chart.js. Quería simplemente imprimir el gráfico directamente desde la página (con un botón que hace un ‘window.print’) sin todo el otro contenido de la página.

Entonces, me acerqué usando la técnica de la respuesta aquí: ¿Por qué no puedo anular la propiedad de visualización aplicada mediante un asterisco? .

Tienes que aplicar el ‘asterisco’ al elemento ‘cuerpo’, no solo. Entonces, usando el CSS de ejemplo que el OP (Nathan) agregó a la pregunta, lo cambié a esto:

  

Luego, agregando esa clase 'imprimible' al gráfico en sí, como en

  

Que eliminó todos los elementos de la página en la salida impresa excepto la tabla cuando se hace clic en el botón 'imprimir' (mediante este):

  

Por lo tanto, quizás esto ayude a cualquiera que consiga esta pregunta a través de Google.

Sugiero ocultar el elemento que no imprimirás

Html

 

Welcome Just Screen

I want print this section :)
It's display only on screen

Css

 @media print { .no-print { display: none; }