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?
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!
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 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.
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.
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 */
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With