Jquery/CSS target a class in print

Question

I'm trying to add some HTML to a class...any ideas why below isn't working?

JQUERY:

$("ul#breadcrumbs li[media='print']").append("<strong>Hello</strong>");

HTML:

<ul id="breadcrumbs">   
        <li class="">
            <a href="supporting-overview.html">Supporting Units</a>
        </li>

        <li class="">
            <a href="literacy-and-learning.html">Language of geography</a>
        </li>

        <li class="active">
            <a href="literacy-and-learning.html">literacy and learning</a>
        </li>

</ul>

Answer 1

The selector ul#breadcrumbs li[media='print'] looks for an li with attribute media that has the value print eg <li media='print'> . There is no such li in your html so no selection is made and no element appended.

Answer 2

You are trying to match a li element with attribute media="print" .Currently you don't have a single li element with such attribute.

For the code to work you will need to have

<ul id="breadcrumbs">   
        <li class="">
            <a href="supporting-overview.html">Supporting Units</a>
        </li>

        <li class="" media="print">
            <a href="literacy-and-learning.html">Language of geography</a>
        </li>

        <li class="active">
            <a href="literacy-and-learning.html">literacy and learning</a>
        </li>

</ul>

$("ul#breadcrumbs li[media='print']").append("<strong>Hello</strong>");

Live Demo

Answer 3

Musa is right. jQuery will only target the tags and tag attributes defined in the html.

To achieve what you want, you can add a class to the element you wish to append

$("ul#breadcrumbs li").append("<strong class='visible-in-print'>Hello</strong>");

and keep this element hidden in all media types except media @print

.visible-in-print {
    display: none;
}

@media print {
    .visible-in-print { 
        display: inline;
    }
}

Answer 4

我试过了

$( document ).attr( 'style', '@media print { body { font-size: 15pt } }' )