CODEWITHSUNDEEP
css
Vladimir
Vladimir

Reputation: 428

CSS media query print:

Doing a page, html result like:

<div class="container table-page">
    <div class="selected-block"> some info here </div>

    <h1>Table header</h1>

    <div class="notice-calc print-shown">Notices !</div>

    <table class="input-data">...</table>

    <button class="js-btn-add-row">Add row to a input table</button>

    <button class="js-calculate">Calculate table values</button>

    <div class="js-waiting" style="display: none;">Progress bar</div>

    <table class="calc-result" style="display:none;">...</table>
</div>

Main idea of styles below - hide every direct children of '.container' except tables and some table elements with class="print-hidden" will be hidden too. For print version of page using rule:

@media print {
    .container> :not(table),
    .print-hidden {
        display: none;
    }
    .print-shown {
        display: block;
    }
}

Later added notices must be shown at print version too, but it does not appear. Nevertheless if edit '.print-shown' rule like:

    .container .print-shown {
        display: block;
    }

Then it shows. Tested in Chrome 88.0.4324.190 (Official Build) (64-bit)/ Dev.Firefox 86.0b9 (64x)/ Opera 74.0.3911.107. And Edge shows it in both cases.

Why single class selector does not work here?

Upvotes: 0

Views: 345

Answers (1)

JAM
JAM

Reputation: 6205

It is because of this selector:

.container > :not(table)

It targets all direct children of .container (which is not a table). This also includes children with the .print-shown-class.

So, when you have a .print-shown element as a child of .container, the .container > :not(table) has presedence over the .print-shown class (because the first selector is more specific than the latter)

Upvotes: 1

Related Questions