CODEWITHSUNDEEP
htmlcsspdfdompdf
AdityaDees
AdityaDees

Reputation: 1047

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:

body {
  font-family: 'Roboto', sans-serif;
  font-size: 0.85em;
  padding-left: 30px;
  padding-right: 30px;
  line-height: 0.95em;
}

@font-face {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: normal;
}

footer {
  position: fixed;
  bottom: -30px;
  right: 0px;
  height: 50px;
  width: 270px;
  text-align: left;
}

footer .page-number:after {
  content: counter(page);
}

footer .page-number .last:last-child {
  display: none
}
<body>

  <footer>

    <div class="right" style="margin-left: -85px;">
      <span class="page-number"></span>
    </div>

    <table width="100%" class="last">
      <tr>
        <td>
          <span style="
    				border: 1px solid;
    				box-sizing: border-box;padding-right: 0.88cm;padding-left: 5px;vertical-align: middle;">Roles I &nbsp;</span>
          <span style="width: 300px;
    				border-top: 1px solid;
    				border-right: 1px solid;
    				border-bottom: 1px solid;
    				margin-left: -6px;
    				box-sizing: border-box;padding-right: 70px;vertical-align: middle;">&ensp;&ensp;&ensp;&ensp;&ensp;</span><br>

          <span style="
    				border-left: 1px solid;
    				border-right: 1px solid;
    				border-bottom: 1px solid;
    				box-sizing: border-box;padding-right: 1.32cm;padding-left: 5px;vertical-align: middle;">Roles II</span>
          <span style="width: 300px;
    				border-right: 1px solid;
    				border-bottom: 1px solid;
    				margin-left: -6px;
    				box-sizing: border-box;padding-right: 70px;vertical-align: middle; ">&ensp;&ensp;&ensp;&ensp;&ensp;</span>
        </td>
      </tr>
    </table>
  </footer>
  MY content here until N - Page and i want to remove the last footer
</body>

as you can see in the example in this picture, I have a number of 3 pages and in the footer there are numbers and boxes that I have marked red. I just want to delete the data in the red box, but for the page number section I don't want to delete it. enter image description here

Note : I'm using dompdf library

Upvotes: 4

Views: 1976

Answers (1)

Liftoff
Liftoff

Reputation: 25432

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.

Upvotes: 1

Related Questions