CSS - Pseudo-class :left

The CSS pseudo-class selector :left represents all left-hand pages of a printed document. It is used with the @page at-rule.

Based on the writing direction of the document, it is determined whether it is "left" or "right". In case the writing direction is left-to-right, the document is said to be :right and when the major writing direction is right-to-left, it is :left page.

All CSS properties can not be changed using the :left pseudo-class. The properties that can be changed are margin, padding, border, and background. Just the page box will be affected and not the content on the page.

Syntax

@page :left {
   /* ... */ 
}

CSS :left Example

Here is an example of :left pseudo-class:

<html>
<head>
<style>
      @page :left {
      margin: 2in 3in;
   }

   body {
      background-color: #333;
      display: grid;
   }

   section {
      background-image: url('images/border.png');
      border-radius: 10px;
      display: grid;
      margin: 2px;
      padding: 0.25rem;
      place-items: center;
      width: 35%;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
   }

   section {
      page-break-after: always;
      break-after: page;
   }

   button {
      padding: 10px;
      width: 100px;
      margin-left: 55px;
      margin-top: 10px;
   }
</style>
</head>
<body>
   <div>
      <section>
      <h1>Page 1</h1>
      </section>
      <section>
      <h1>Page 2</h1>
      </section>
      <button>Print</button>
   </div>
   <script>
      document.querySelector("button").addEventListener('click', () => {
      window.print();
      });
   </script>
</body>
</html>

In the above example

  • a document is created with two pages (sections), as we have used 'page-break-after: always on section.

  • the pseudo-class :left is applied, which will result in the styling of margin set on page.

  • the first page is considered a "right" page and has the default margin, but the second (even-numbered) page contains the styling applied by :left.

Advertisements