Changing HTML from CSS media query

Question

I have a situation in which I want to change an HREF in an unordered list in HTML when a CSS media query is true. Specifically I want to change an HREF from calendar.html to ca

Answer 1

On a related note... You can manipulate HTML using CSS content ... The following taken from Chris Coyier at CSS-tricks.com

.email-address:before {
content: "Email address: ";  }

<ul>
<li class="email-address">chriscoyier@gmail.com</li>
</ul>

And the output would be like:

• Email address: chriscoyier@gmail.com

Answer 2

I don't think CSS can alter HTML attributes

you can just "hide" it, and display the other one

@media only screen and (...) {
    .your-default-calendar {
        display: none;
    }
    .your-calender2 {
        display: inline-block;
    }
}

but why not just use JavaScript? you can change a attribute easily in JavaScript.

if (window.matchMedia("your media queries").matches) {
    // ...
}

Answer 3

The question to ask is: How will the hidden content be used.

The display CSS property hides HTML that is already built. If you have mobile, tablet, and desktop HTML, the application can be building HTML and applying CSS 3x while only displaying once.

If it will be turned on and off, display works. If it will use either a mobile or a tablet or a desktop display and never use the others, using Javascript to add the content is better.

Note that AngularJS has ngIf and ngSwitch directives that accomplish that only using HTML attributes.

Answer 4

I think it will easy if you create both link in html

<li id="schedule_link_mobile">
    <a href="calendar2.html" >Schedule</a>
</li>
<li id="schedule_link_pc">
    <a href="calendar.html" >Schedule</a>
 </li>

and then use the css to hide the one that you don't want to show

#schedule_link_mobile{
    display: none;
}
#schedule_link_pc{
    display: inline-block;
}
@media only screen 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{
    #schedule_link_mobile{
        display: inline-block;
    }

    #schedule_link_pc{
        display: none;
    }
}