Changing HTML Elements without JS!

Using @media in CSS, we can change styles of responsive website according to computer or mobile.
But can we change HTML elements according to device to make responsive website without JavaScript? If JavaScript is only option, please tell me the code.

You can do a lot with css, it let’s you also change the content of an html element. You can also choose which elements are shown, adding visibility: hidden (I think? You better check if you are going to use this) to the ones you don’t want to show in one media query and show them in an other media query. You can’t actually delete or add html elements.

But if you really want an interactive page you need something a bit more different than CSS.

You need to learn DOM for that

In FreeCodeCamp the certificates after basic JavaScript explore this (and more).

1 Like

Well, you can add pseudo-elements (::before, ::after) and using display: none acts a lot like removing an element. There is also something like the checkbox hack which lets you trigger CSS changes depending on the state of a (hidden) checkbox, but it has its limitations and isn’t considered a good practice.

Without knowing what it is you want to achieve it is impossible to say if it can or can’t be done in pure CSS. But as ieahleen said if you want to do real DOM manipulation you need JS.