window.print + css print div only

by Roman Joseph Rimorin

HTML

<input type="button" value="print" id="print">
<div id="section-to-print">
  <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
  <div id="section-to-print3">
  <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element 1</div>
  <div>element 2</div>
    <div>element...

CSS

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    color: white;
    font-size: 5rem;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
    
  }
}

#section-to-print {
  color: pink;
  background: #AAAAAA;
}

JavaScript

document.querySelector("#print").addEventListener("click", function() {
	window.print();
});