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

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) {
    // ...
}