So I am making a document with html and css for printing, when I try to select a specific page of the entire document with:
#page :nth(5) {
background-color: aqua;
}
it doesn't select the page (in this example the background color)
What I want to achieve is to select specific pages of a entire document.
Please refer to the documentation (or for the spec, here). regarding the use of the #page rule:
You can only change the margins, orphans, widows, and page breaks of
the document. Attempts to change any other CSS properties will be
ignored.
As you can see, changing the background-color property will be ignored.
Related
pretty new to CSS and HTML and was hoping somebody could help me fix this. I wanted to be able to change the icon for the cursor although when I run the code, simply no change. A few visits to chatGPT hasnt done me much either. Here's my code:
body2 {
cursor: url("assets/img/wiiu/Smile_icon_32x32.png"), url("assets/img/wiiu/cursor.svg"), auto;
}
And yes, it is 32x32.
I've tried moving it to different classes, changing words, changing everything. Although nothing has worked.
here is a good reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?retiredLocale=de
So basically you try to applie to a body2 HTML element you're CSS code. If its a class try the CSS selector .body2 {} or in the case its an id of a HTML element #body2 {}.
In you're css you've got one main picture and the second one as fallback. Just make sure you set the correct path corresponding to the location of you're CSS file.
To ensure that, you can also try the full path instead of the relativ one like C:\Users\xxx\Smile_icon_32x32.png
You are using the wrong css declaration, your code will only work if you have defined a custom html element having <body2> as tag.
What you probably want is:
body { ... }
applied to <body> tag
or a css class
.body { ... }
applied to or any other tag having body as class.
or a css id
#body { ... }
applied to or any other kind of tag with body as id.
Alternatively check in the browser console if the rule is applied and if the image path is resolved correctly.
Here is an example where http://example.com/32x32/990000/fff.png&text=PNG don't exist and https://dummyimage.com/32x32/009900/fff.gif&text=GIF exist so the gif will be used instead of the png :
.body2 {
display:inline-block;
cursor: url("http://example.com/32x32/990000/fff.png&text=PNG"),url("https://dummyimage.com/32x32/009900/fff.gif&text=GIF"), auto;
}
<div class="body2">display</div>
I'm desperately trying to hide an automated added image on a checkout page.
I'm trying to select the element div.panel-body:after which is on a page that has a body class.
I've tried:
body.offer-checkout-offer-311523 div.panel-body:after {
display: none !important;
}
div.panel-body is not a direct child of body that's why I used a space between the selectors instead of > But despite my attempts, the image does not hide.
Any clue?
Edit:
the HTML element I'm trying to edit:IT's the ::after I'm trying to target
HTML code
I've tried to export the whole path to the element but...
Edit2:
This is my website, It's probably easier if I show the page here: photoserge.com/offers/yDBpDfqi/checkout?coupon_code=FBPSQS
I'm trying to hide the credit card images but only on this page. The whole site uses the same checkout page thats why I'm trying to target only this specific instance.
Maybe try:
.checkout-panel .panel-body::after{
display: none
}
I just tried by inspecting the page.
Also, if you want to target this specific page. You will have to remember to add the css to only this page, and not add this code to a global css file.
I have to use two different headers in the print version: one for the first page and one for the other pages. I would like to put a header (fixed on the top) for the other pages and use the css display: none for the first page. But I have not any effect with #page :first.
This is my code:
#page :first {
.header {
display: none;
}
}
I tried also putting !important in the css but nothing happens.
What should I do?
:first allows only few CSS properties. You can only change margins, page breaks and windows with it.Other CSS properties will be ignored. So i assume display:none may not work.
Though you can refer more about how to use #page and with what type of CSS properties it works.
https://developer.mozilla.org/en/docs/Web/CSS/:first
According to: https://developer.mozilla.org/en/docs/Web/CSS/#page
The #page CSS at-rule is used to modify some CSS properties when
printing a document. You can't change all CSS properties with #page.
You can only change the margins, orphans, widows, and page breaks of
the document. Attempts to change any other CSS properties will be
ignored.
And also for the :first https://developer.mozilla.org/en-US/docs/Web/CSS/:first
Note: you cannot change all CSS properties with :first. You can only
change the margins, orphans, widows, and page breaks of the document.
All other CSS properties will be ignored.
So since you're trying to remove one of your own elements - try using media queries instead:
#media print {
.header { display: none; }
}
https://benfrain.com/create-print-styles-using-css3-media-queries/
It looks like it's a Mozilla bug.
I am not able to get margins working, even when following their own example here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first
Both pages are printed in an identical way, no difference.
I want to give some space to top of every page which is applied in only in printing mode.
is it possible or not..?
I am using:
#page { margin-top : 30px; }
But it doesn't get applied..
Are there any other methods available in css..?
You can do the following way.
#media print
{
body {margin-top:30px;}
}
This will select and target only the print related CSS changes. Hope this helps.
*PS: I have taken Body element, but if you want, you can target specific wrapper that is part of your HTML and you can target it specifically only if you want that wrapper to start from top with certain spacing. You have the solution with logic. Use it to match your scenarios.*
I have a HTML header template with its own style sheet. This HTML code is complex, it contains menu's, different blocks and other floating elements. The CSS file contains styles from whole website. It total 800 selectors.
When I just include the HTML and the CSS in my existing website, it breaks. This is due the fact that a lot of CSS rules are interfering with the rules of the website. For example CSS from the header template has a selector with name ".nav" and the website has that too. Because both of them have different rules, the website breaks.
My question is how do I 'include' this HTML file in an existing website without complete recoding.
I though the following: process the styles from the template and give each a unique name. So every '#body' becomes "#body-1", every ".nav" bocomes ".nav-1", etc. Doing this by hand will take a while.
Is there a tool which could do this?
Use what I call "CSS Namespacing".
Change the CSS rules for the new page such that they are contextual to an ID or class.
For example, take this:
.nav // nav for new page
{
blah: blah;
}
and make it this:
#NewyThingy .nav
{
blah: blah;
}
And surround the newly included page in div with id="NewyThingy".
Or
.NewyThingy .nav
{
blah: blah:
}
and change the body tag of the newly include page to have class="NewyThingy".