Creating a CSS rule that specifically targets a particular div id on a webpage can be accomplished by using the selector syntax to select

Is there a way to conditionally apply a @media print css ruleset only when a specific div is present on the page?

For example, I have the following css to assist in printing #mytargetdiv:

@media print {
    .inside-article > :not(#mytargetdiv), .inside-navigation, .site-footer {
        display: none;
    }
}

While this works well for pages with #mytargetdiv, not all pages have a div with that id. How can I ensure that this @media print rule is only applied when #mytargetdiv is present on the page?

Any suggestions on excluding this @media print css rule for pages that do not include #mytargetdiv?

css

Answer №1

To determine whether the ID exists, you can utilize JavaScript and then apply the necessary styling if it is present.

if (document.getElementById('mytargetdiv') != null) {
    var style = document.createElement('style');
    style.innerHTML = '@media print { .inside-article > :not(#mytargetdiv), .inside-navigation, .site-footer { display: none; } }';
    document.body.appendChild(style);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to control the overflow length and display only a specific amount of content at once?

I am currently designing the homepage for a social media platform. I have around 45 dummy posts and I am looking for a way to limit the overflow in CSS so that only 5 posts are displayed at a time. Once the user reaches the bottom of those 5 posts, another ...

javascripthtmlcssreactjsmaterial-ui

"Optimize Magellan Sidebar for Mobile Devices by Relocating it to the Bottom of the Page

After spending a week working with Foundation 5 framework, I'm curious if there is a straightforward way to make my magellan sidebar shift to the bottom of the page when viewed on mobile or tablets. <div data-magellan-expedition="fixed"> <di ...

javascriptjqueryhtmlcsszurb-foundation

Tips for rotating individual letters within a sentence on popular web browsers, including Chrome

Can you make a sentence appear with each individual letter rotating and getting larger? This is my approach: I decided to split the sentence into separate span elements, one for each letter. Then I used CSS transform -webkit-transform to animate the lette ...

javascriptcssgoogle-chromed3.js

Is it possible for an image to be displayed in another div or table column when I hover my mouse over it?

I am looking to create an image gallery with thumbnails on the left side. When I hover over a thumbnail, I want the full image to be displayed in another section on the page. Can anyone provide me with the correct code or suggest a plugin to achieve this f ...

javascriptjqueryhtmlcssimage

Using $_POST method to navigate within the same web page

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>PHP links</title> <?php echo '<div style="background-color:#ccc; padding:20px">' . $_POST['message'] . '</div>'; ...

phpjquerycsssqlajax

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...

javascripthtmlcss

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

On my webpage, there is a JavaScript function using jQuery that I want to automatically start when the page loads. At the same time, I want to ensure that users can still interact with this function. This particular function involves selecting a link tha ...

javascriptjqueryhtmlcss

Concealing and revealing elements through css styling

In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience. Recently, I created a page with a custom video fie ...

csswordpress

Troubleshooting with matTootip on Safari: Tips for avoiding input-text blockage

I am currently using the matTooltip feature from Angular Material for an input field. However, on Safari, the input field appears to be overlapping, making it impossible to type in. Despite my attempts to change the position of the toolTip, the issue pers ...

cssangularangular-material

How can I switch between different images using jQuery?

HTML <div class="image_rollover"> <img id="image_one" src=image_one.png"> <img id="image_two" src="image_two.png"> <img id="image_three" src="image_three.png"> <img id="image_four" src="image_four.png"> ...

javascriptjquerycss

Alignment troubles persist with text formatting

The alignment of the link at the bottom of the page seems to be causing an issue. <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="cssforwebsite.css"/> <link href="https://fonts.googleapis.com/c ...

htmlcss

The Bootstrap card is elegantly framed by a crisp white border surrounding the

After referencing a tutorial, I implemented the following code: <div class="card" style="width:400px"> <img class="card-img-top" src="image.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</ ...

csstwitter-bootstrapbootstrap-4

Numerous categories housed within various div containers

I am working with an HTML code that contains 6 different div elements: <div class="hisclass1 hisclass2 myclass hisclass3"> <div class="herclass1 herclass2"> <!-- 2nd div --> </div> </di ...

htmlcss

Displaying a video in fullscreen on a webpage

Struggling to achieve the desired result, seeking advice from experts. Looking to create a classic example like this: http://codepen.io/anon/pen/rWwaRE But want it embedded within blocks of text and possibly triggered by scrolling over it similar to this ...

htmlcssvideofullscreen

Concentrate and essential

I am encountering an issue with required inputs and the :focus styling on those inputs. When I try to submit empty values, the red border from the required styling appears and does not disappear when I click on the input. As a result, I end up with a stran ...

htmlcssfocusborderrequired

Ways to align elements horizontally while preventing them from shifting positions

I'm faced with a layout challenge where I need to place 2 components side by side, but I want one component to stay on the right without affecting the orientation of the other component. Example: https://i.stack.imgur.com/T5Ram.png Currently, when I ...

htmlcssreactjsmaterial-ui

Creating websites with HTML and CSS

I am trying to enhance the style of my paragraph by applying multiple attributes, such as font color and font type, using CSS. While applying a single attribute like p {color:green} works fine, I encounter errors when trying to apply more than one line of ...

htmlcssattributes

How can I utilize CSS to dictate color schemes on an HTML5 canvas element?

Currently, I am working on a checkers project where the first step is to create the initial board. The way we are currently implementing this has raised a philosophical concern. We are using the fillRect function to define the color of the "dark" squares a ...

csshtml

The CSS :not selector does not work as intended

My goal is to assign the class no-color to a specific tag. When JavaScript is enabled, I want this class to be removed and the text to be colorized. However, my current CSS solution is not working as expected. Below is a sample code snippet demonstrating t ...

htmlcsssass

Opposing the fill attribute with the current color

Is there a way to reverse or eliminate the effect of fill: currentColor? .svg-icon * { /* Targeting all sub-elements to customize icons with a specific color */ fill: currentColor; } .svg-icon.iconLogoGlyph * { /* How do I cancel out fill: curren ...

csssvg