CODEWITHSUNDEEP
htmlcsscss-selectorscss-paged-media
Hurda
Hurda

Reputation: 4715

CSS paged media - impossible to style elements on the first page differently

we have a different space and margins on the first page (as opposed ro all others) and so we need to style some items in the contnet differently if they appear on the first page.

The content is user generated, so we can't put explicit styles that definy what page it is on. (as we dobt know before looking at it) - but similar would apply if we allowed for print on various page sizes.

See the contrived example here: AS we don't know teh length of the text we don't know if the second .magix-box falls onto the first page or a second one - and we would like to have a different bg color for on teh first page or all the others:

(one can see the live example here - https://printcss.live/ but I canty share it directly with HTML/CSS populated)

@page{
    size:3.5in 2in;
    marks:crop;
    bleed:0.125in;
    margin:0.25in;
} 

@page:first{
    background:blue;
    margin:0;
}

body{
    font-size:10pt;
}


.magic-box{ 
  background: green;
  
}
<div class="magic-box">Magic</div>
<p>psum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim nisi
nec dolor fermentum, nec pharetra felis gravida. Duis sollicitudin turpis odio, 
nec dignissim neque elementum sed. Aenean non nisl ut est consequat varius.
Phasellus imperdiet felis convallis velit hendrerit consequat. 
ulla in massa ultricies, vehicula dolor ut, bibendum quam. 
Curabitur vel vehicula lacus, a egestas lorem. Sed justo mi, 
Curabitur vel vehicula lacus, a egestas lorem. Sed justo mi, 
Curabitur vel vehicula lacus, a egestas lorem. Sed justo mi, 
</p>
<div class="magic-box">Magic</div>

I can't find any rousource that would suggest how to do it. It seem inpossible.

what are we missing?

Upvotes: 0

Views: 118

Answers (0)

Related Questions