:left CSS Pseudo Class

Description

The CSS :left pseudo-class is used with the @page at-rule to select all left-hand pages of a printed document. Whether a given page is "left" or "right" is determined by the major writing direction of the document.

For example, the following CSS will style the left margin of all left-hand pages to be 1 inch:

@page :left {

  margin-left: 1in;

}

You can also use the :left pseudo-class to style other properties of left-hand pages, such as the padding, border, and background.

It is important to note that the :left pseudo-class can only be used to style the page box. This means that you cannot use it to style elements on the page, such as paragraphs, headings, or images.

Here is an example of how to use the :left pseudo-class to style the background of all left-hand pages:

@page :left {

  background-color: lightblue;

}

This will make all left-hand pages have a light blue background.

The :left pseudo-class can be a useful tool for styling printed documents. By using it, you can create different styles for left-hand and right-hand pages, or for even and odd pages.

Syntax

:left {
  /* ... */
}

Example

Browser Support

The following table will show you the current browser support for the CSS :left pseudo class.

Desktop
12	6	x	9.2	5

Tablets / Mobile
18	x	10.1	4.2	1	37

Last updated by CSSPortal on: 1st October 2023