Menu
Using Drupal, the theme has a background color assigned to the <HTML> element. I'm creating a separate print CSS for ONE particular page, and wish to remove the background color ONLY for this page when the user prints the page. The <HTML> element has no class, or id, but the <BODY> element does.
<HTML style="background-color:#666">
<BODY class=specialPage>
</body>
</html>
Is there a way to specify that I want the parent element of <BODY>? Or some way of targeting <HTML> based on the class of <BODY>?
EDIT:
|------------------------|
| <HTML> |
| |----------| |
| | | |
| | <BODY> | |
| | | |
| |----------| |
| |
|------------------------|
278
To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class.
Tip: The class attribute can be used on any HTML element. Note: The class name is case sensitive!
The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.
In jQuery you can do the following:
$('body.specialPage').parent('html').css({'background-color': 'white'});
This will work whether another element contains body or not.
Here's a working jsFiddle.
Also, you should use lowercase letters for your html elements, html instead of HTML.
194
You could try overriding the background-color style from the HTML tag with the !important modifier..
<HTML style="background-color:#666">
<BODY class=specialPage style="background-color:#123 !important">
</body>
</html>
$("body.specialPage")
.closest("html")
.css("background-color","");
The first line targets the body element with the special class. Then we select its parent HTML tag and 'remove' its background color. The beauty is that it won't select the parent HTML if the class isn't specifically set to the one you're looking for.
This would also work:
if( $("body").hasClass("specialPage") ){
$("html").css("background-color","");
}
jQuery's hasClass() returns a boolean (true if it has the class and false if it doesn't), so is the body tag has the class you're looking for, it will run the code in the if function, which again 'removes' the background color from the HTML tag.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
