I just found the CSS #page directive, and using it with :first to apply CSS to the first page of an html print. Is there any way to go the opposite, and apply CSS to all pages except the first?
Use CSS3's :not() together with #page:
#page :not(:first) {
}
If you need better browser compatibility, Donut's solution of styling everything then "undoing" them for :first also works (relying on specificity/the cascade).
#page {
/* Styles for everything but the first page */
}
#page :first {
/* Override with perhaps your stylesheet's defaults */
}
If you're using CSS2, you can do it indirectly. Use #page to set the style that you want for all your pages except the first, then use #page along with :first to "undo" those styles for the first page.
Related
I was wondering if it is possible to define the styles of an element depending on the value of the body ID.
It is difficult to explain but something like this would be ideal:
HTML:
<body id="home">
CSS:
body#home {
a { /* code here */ }
p { /* code here */ }
}
body#profile {
a { /* different code here */ }
p { /* different code here */ }
}
I know I can do this:
body#home a { /* code here */ }
but that becomes very repetitive.
I will be looking forward to your responses,
Peter
You can do this if you use a CSS framework like SASS or LESS
Here's the documentation on how to do this with LESS. Hope this helps.
IDs are supposed to be unique, so #home { ... } is acceptable.
Then and child elements would be:
#home .myClass { ... }
This technique if often used to re-skin pages be simply changing the ID or class on a body.
Be aware that while nesting styles like this can be supported using CSS frameworks, it should be well thought-out to maintain modularity and clean inheritance in your CSS. You can end up doing more harm than good. In particular, watch out for something know as the inception rule, described here:
http://thesassway.com/beginner/the-inception-rule
The Inception Rule: don’t go more than four levels deep.
Any change you make to your markup will need to be reflected into your
Sass and vice versa. It also means that the styles are bounded for
life to the those elements and that HTML structure which completely
defeats the purpose of the "Cascade" part of "Cascading Style Sheets."
If you follow this path, you might as well go back to writing your CSS
inline in your HTML (please don't).
The best way to do what you are talking about is to have a base stylesheet the site.
They have either:
A <style> element in the header overriding anything you choose
or
Have a different stylesheet for each page
How to add class "bottom-post" to the post that is at the very bottom of my wordpress blogroll? I need to style it differently. (I can't use the static ID since the the post and the total number of posts are constantly changing)
You can add classes to elements with jQuery:
$(".post:last-child").addClass("bottom-post");
and then style like so:
.bottom-post {
/* Different styling */
}
A benefit of this method (compared to using pure css) is that this will apply the class to the element and allow styling even on browsers that don't support the :last-child css selector. I tested this on IE6-8 and it worked in all of them.
The following provides an explanation as to why the :last-child psuedo selector tends to be preferred over :last in this case:
http://api.jquery.com/last-selector/
You could use the CSS pseudo class :last-child to select the last post.
For Example:
.post:last-child
{
color: red;
}
Link me to your blog and I'll be able to give a working example.
I have been advised that said CSS page-break-inside:avoid; would prevent elements being printed between 2 pages.
On this directions print out this simply does not work on all tested browsers so far. The CSS .instruction has this applied yet prints across pages.
Example: http://www.golfbrowser.com/A4/directions.php?start=PARIS&end=SL42ES
Any ideas?
The page-break-inside property is only supported by Opera.
http://www.w3schools.com/cssref/pr_print_pagebi.asp
Just add a print stylesheet or use a media query and a breaking div or just add the style to the elements in your html that need braking when printing.
Try adding this after every long block of content that you think needs breaking:
<div class="break"> </div>
And as for your css just add this:
.break {
display:none;
} //place inside your regular stylesheet file
#media print {
.break {
display:block;
page-break-after:always
}
}
This method works in most modern browsers, including IE8+.
i would like to deselect and #id item from a selection without changing HTML or adding any classname,
lets say i want to emulate this Jquery sentence in CSS
$('img').not('#thisone').CSS();
is it possible?
Use CSS3's :not() selector (which has an equivalent jQuery selector):
img:not(#thisone) {
}
If you need better browser support, there's always the fact that ID selectors, being the most specific simple selectors, are good for overrides:
img {
/* All images */
}
#thisone {
/* Revert styles for this particular image */
}
This might help
http://www.w3.org/TR/css3-selectors/#negation
(Jquery does that internally anyway, I think, didn't check, though).
I am using Joomla 1.5.
i am having a page where a cSS has been added for the title
which is in <strong></strong>
I firebug it , it appears as
element.style {
color:#666666;
}
i dont know of from where it comes from..
but i am having a css applied for the same tag with other color. but it disappeared.
How to remove the element.style globally..
It is possible to override inline styles from an external stylesheet
strong[style] { color: blue !important; }
This works in most major browsers, Chrome, Safari, Firefox, IE8
It doesn't work (to my knowledge) in IE6 / IE7
Hope this helps.
This code comes from HTML and not from your CSS.
This HTML with generate your element.style:
<strong style="color:#666666;">Just text</strong>
Element.style, as the name says, its the style defined on element and there is no way to override it. If you do not want that color in that element you must remove/change it on html.
It seems it is not always set in HTML. In My case the element.style is empty:
element.style {
}
It is not set in any css and it is not set in any html source.
I dont't know where else I should look.
Inline styles are generated from HTML or (more often these days) javascript applying styles after the page had loaded.
Jquery is often a culprit of this, performing animations using css applied directly on the element that overrides your stylesheet.
For instance you may show, then hide a div, leaving a 'display:none' on the element that overrides any naturally cascading CSS that precedes it. This comes up often when you are mixing CSS transitions and media queries with javascript.
Check your JavaScript for any instances of applied styles.
Try using a callback function on the animation to clear styles:
$(this).css( "display", "" );