mozilla

Revision 40987 of :left

  • Revision slug: CSS/:left
  • Revision title: :left
  • Revision id: 40987
  • Created:
  • Creator: Fantasai
  • Is current revision? No
  • Comment 32 words added, 13 words removed

Revision Content

{{ CSSRef() }}

Summary

The :left page pseudo-class matches any left page when printing a page. It allows to describe the styling of left-side pages.

Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a :right page and if it has a major writing direction of right-to-left then it will be a :left page.

Note: You can not change all CSS properties. You can only change the the margin/padding/border/background properties of the page box. All other CSS properties will be ignored, and only the page box, not the document content on the page, will be affected.

Examples

@page :left {
  margin:2in 3in;
} 

Specifications

CSS 2.1 Paged media #page-selectors

Browser compatibility

{{ CompatibilityTable() }}

Feature Gecko Webkit Internet Explorer Opera
Basic support {{ CompatNo() }} {{ CompatUnknown() }} 8 9.2

See also

  • {{ Cssxref("@page") }}
  • {{ Cssxref(":first") }}
  • {{ Cssxref(":right") }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The <code>:left</code> <a href="/en/CSS/@page" title="@page">page</a> <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> matches any left page when printing a page. It allows to describe the styling of left-side pages.</p>
<p>Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a <code>:right</code> page and if it has a major writing direction of right-to-left then it will be a <code>:left</code> page.</p>
<div class="note"><strong>Note:</strong> You can not change all CSS properties. You can only change the the margin/padding/border/background properties of the page box. All other CSS properties will be ignored, and only the page box, not the document content on the page, will be affected.</div>
<h3>Examples</h3>
<pre>@page :left {
  margin:2in 3in;
} 
</pre>
<h3>Specifications</h3>
<p><a class="external" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" title="http://www.w3.org/TR/CSS21/page.html#page-selectors">CSS 2.1 Paged media #page-selectors</a></p>
<h3>Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Gecko</th> <th>Webkit</th> <th>Internet Explorer</th> <th>Opera</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatNo() }}</td> <td>{{ CompatUnknown() }}</td> <td>8</td> <td>9.2</td> </tr> </tbody> </table>
</div>
<h3>See also</h3>
<ul> <li>{{ Cssxref("@page") }}</li> <li>{{ Cssxref(":first") }}</li> <li>{{ Cssxref(":right") }}</li>
</ul>
Revert to this revision