Geek Answers Handbook

How to customize an HTML target element from a specific BODY element class

Using Drupal, the theme has the background color assigned to the <HTML> element. I am creating a separate CSS print for ONE specific page and want to remove the background color for that page only when the user prints the page. The <HTML> element does not have a class or id, but the <BODY> element does.

 <HTML style="background-color:#666"> <BODY class=specialPage> </body> </html>

Is there a way to indicate that I want a parent <BODY> element? Or some way to target <HTML> based on the <BODY> class?

EDIT:

 |------------------------| | <HTML> | | |----------| | | | | | | | <BODY> | | | | | | | |----------| | | | |------------------------|
+7
source share
3 answers

In jQuery you can do the following:

 $('body.specialPage').parent('html').css({'background-color': 'white'});

This will work if the other element contains body or not.

Here's the working jsFiddle .

In addition, you should use lowercase letters for your html elements, html instead of html .

+4
source 
 $("body.specialPage") .closest("html") .css("background-color","");

The first line targets the body element with a special class. Then we select its parent HTML tag and “delete” its background color. The beauty is that it will not select parent HTML unless the class is specifically configured for the one you are looking for.

This will also work:

 if( $("body").hasClass("specialPage") ){ $("html").css("background-color",""); }

jQuery hasClass() returns boolean ( true if it has a class and false if it is not), so the body tag has the class you are looking for, it will run the code in the if function, which again "removes" the background color from the tag HTML

+3
source

You can try overriding the background color style from the HTML tag with an important modifier.

 <HTML style="background-color:#666"> <BODY class=specialPage style="background-color:#123 !important"> </body> </html>
+3
source

More articles:


All Articles