I need to know if I can modify content on the last page with the :last selector.
I'm not sure if it exists, I see it being used in other stackoverflow answers like this: Footer on last printed page.
But I can't find it in the documentation and it does not work when I try to use it.
I'm trying to clear the content on the footer of my last page like this:
#page {
#bottom-right {
content: "Please turn over";
}
}
#page :last {
#bottom-right {
content: none;
}
}
It works when I use it with the :firstselector. How can I get the effect for the last page?
I'm using Weasyprint to print PDF files.
This can be achieved using named pages.
Create an element on the last page (or use an existing one that will appear on the last page) and assign it a last-page class.
Example below:
HTML
<div class="last-page"></div> <!-- Or add this class to an existing element that appears on the last page -->
CSS
.last-page {
page: last_page;
page-break-before: always; /* Use if your last page is blank, else omit. */
}
#page {
#bottom-right {
content: "Please turn over";
}
}
#page last_page {
#bottom-right {
content: none;
}
}
Tested with Weasyprint - worked a charm.
Based on the CSS3 Page docs it appears the :last pseudo-class was removed (or never included).
It might be possible to target the last page using the :blank pseudo-class if you can force a page break at the end of your document. This might have unwanted effects on other blank pages though.
Related
How can i suppress/hide elements when printing especially a header at first page only.
<table>
<thead><tr><td>must be invisible at first page</td><tr></thead>
<tbody><tr><td>content></td></tr></tbody>
<tfoot><tr><td>footer</td></tr></tfoot>
</table>
i have read Remove Header from First Page of HTML Generated PDF - CSS, which is seems to be solutions, but it has dead link.
and i dont understand bellow code:
#page {
#top-center {
content: element(header,first-except);
}
what is content: element(...) ?
where can i get manual/reference to this element (xxx) function ?
thx
I want to use the value generated by counter(pages) in order to do something specific on the last page of a printed web document using an #page rule.
Using counter(pages) is working fine for me in an at-page context:
#page {
#top-right {
content: counter(pages);
}
}
Addressing a specific page also works fine:
#page: nth(69) {
#top-right {
content: normal;
}
}
What I want is to pass the total page count to nth(), like so:
#page: nth(#{counter(pages)}) {
#top-right {
content: normal;
}
}
Without success.
I've tried using a SASS variable:
$pagecount: 69; // this works
$pagecount: '69'; // even this works
$pagecount: #{counter(pages)}; // but this doesn't
$pagecount: counter(pages); // nor does this
...
#page: nth(#{$pagecount}) {...}
...
When I try to use the dynamic value my code always compiles to
#page :nth(counter(pages)) {}
which of course does nothing.
Is it possible to get the total page count into nth()?
As pointed out by 3rdthemagical, an answer to this previous question achieves what I want, not by using counter(pages) but instead by using named pages on an element that is positioned on the last page of the document.
I have tried to search but am not sure if I am posing the question right.
I applied the following css to my site:
a[target='_blank']::after {
content: '\29C9';
}
This means that all external links will get the icon attached to it. So far, so good, it works as expected.
There are some situations though where I do not want this to happen, like in social share buttons. How can I exclude some classes?
Like when the link appears in a div with class 'socialbutton'?
PS I cannot add other style to these buttons (WordPress website and generated code)
You can overwrite this css code by adding new css to the class.
Example you can overcome this:
a[target='_blank']::after {
content: '\29C9';
}
By doing this:
.socialbutton::after {
content: '\fff' !important;
}
You can use the :not() selector:
a[target='_blank']:not(.social)::after {
content: '\29C9';
}
is there a way with pure css to Have a link that might say "New! Watch Video" and then once someone has clicked the link have it remove the "New" portion of the link. I'm assuming this can be done w/ Jquery but I'd like to see if there is an way to remove it with just css.
Rather than removing words, add the word "New" if the link hasn't been visited yet
a:before {
content: "New! ";
}
a:visited:before {
content: "";
}
No extra markup, and you don't need to put the word "New" everywhere.
Wrap the "New!" in a span inside the anchor:
<a class="newText" href="somepage.html"><span>New! </span>Watch video</a>
and in your CSS, set:
a.newText:visited span { display: none; }
I would recommend using a class on the anchor (like "newText" above) so that this formatting will only be applied to the links you want it on. And keep in mind that the "New!" text will reappear if the user clears their browser history.
Assuming the anchor will take you to a new page you can use the following technique:
a:before {
content: "New! ";
}
On any page you wish to remove or change it, you can add a body class
body.blah a:before {
content: "";
}
I wrote some dummy css. Instead of a tag I got escaped characters. How can I add a div tag instead?
.HeaderName:after{
content: "<div class=\"Name2\">text</div>";
}
.Name2 {
color: red;
}
The content declaration cannot add tags to the page (tags are structural); additionally, CSS is meant for presentation changes, not structural content changes.
Consider using jQuery, instead, such as:
$(".HeaderName").after("your html here");
If you need that extra tag only to make the added text red, just do this:
.HeaderName:after{
content: "text";
color:red;
}
Tested on Chrome.
You can't insert tags using content: in CSS. Here is the relevant part of the spec; see the 'content' property in the CSS 2.1 spec.