Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Any way to css select all EXCEPT the first page?

I just found the CSS @page directive, and using it with :first to apply CSS to the first page of an html print. Is there any way to go the opposite, and apply CSS to all pages except the first?

like image 499
eidylon Avatar asked Dec 20 '10 18:12

eidylon


People also ask

How do I select all except first in CSS?

The trick is very easy, in CSS we have the sibling selector ("+"), if i will make selector that choose "li + li" it will select all list-items except the first . That's all!

How do I select all except first child CSS?

We can very easily achieve this using the :not and :first-child selectors in a combination. For example, if you want to select all paragraphs except the first one that are inside a div element, you can use div :not(:first-child) selector.

How do you select every element except first?

How to Select all Elements Except the First With the CSS :not(:first-child) Selector. Learn how to select all HTML elements except the first with the CSS `:not(:first-child) selector. If you add the following rule-set to your CSS stylesheet, every h2 element on your entire website will get a 64px top margin.

How do you not select the first element in CSS?

Use the :not(selector) Selector Not to Select the First Child in CSS. We can use the :not(selector) selector to select every other element that is not the selected element. So, we can use the selector not to select the first child in CSS. We can use :first-child as the selector in the :not(selector) selector.


2 Answers

Use CSS3's :not() together with @page:

@page :not(:first) {
}

If you need better browser compatibility, Donut's solution of styling everything then "undoing" them for :first also works (relying on specificity/the cascade).

@page {
    /* Styles for everything but the first page */
}

@page :first {
    /* Override with perhaps your stylesheet's defaults */
}
like image 102
BoltClock Avatar answered Sep 30 '22 15:09

BoltClock


If you're using CSS2, you can do it indirectly. Use @page to set the style that you want for all your pages except the first, then use @page along with :first to "undo" those styles for the first page.

like image 26
Donut Avatar answered Sep 30 '22 14:09

Donut