Delete The Footer Only On The Last Page Using CSS

I'm working on generate pdf. I want to remove the last page using css method, i'm trying to get :last-child for remove it but the results is nothing. My code: as you can see in t

Solution 1:

Your problem is your selector, which does not target anything.

This selector: footer .page-number .last:last-child is targeting the last child element with className last of an element with className page-number inside a footer element.

This would look something like this:

<footer>
    <div class="page-number">
        <div class="last"></div>
        <div class="last"></div> <!-- It would target this element -->
    </div>
</footer>

However, your structure looks like this:

<footer>
    <div class="right">
        <span class="page-number"></span>
    </div>
    <table class="last"></table>
<footer>

It seems like you are trying to target both .page-number and .last in the last footer element in the page, which can be done using a different pseudo-selector, :last-of-type.

The selector would look like this:

footer:last-of-type .page-number,
footer:last-of-type .last

This targets all elements with className page-number or last inside the last <footer> element on the page.

This of course assumes that your footers are all siblings. If they are not, then you have to move the :last-of-type or :last-child up the tree until you are on the elements which are siblings.

For instance, in this case:

<div><footer></footer></div>
<div><footer></footer></div>
<div><footer></footer></div>

You would want to match the div, rather than the footer, since pseudo-elements are relative to their parent, and each footer is the only footer inside its parent.