Simulate single page app using CSS selector (:target)

hack the idea of SPA using :target css selector (it is a funny idea more than for actual use ) preview

why target selector, because it is the only selector that can understand the URL.

the target selector refers to the element with the id matches
the URL hash

the idea is to give every page id and hide all pages except the current target page

and you can still navigate between pages without javascript
or refresh the page as normal

to hide all pages except the target page

 .page:not(:target) {
   display: none;
 }

put nav to be fixed in all pages

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <a href="#posts">Posts</a>
</nav>

create pages that will be affected

<div class="page home" id="home">Home</div>
<div class="page about" id="about">about</div>
<div class="page posts" id="home">posts</div>

if the URL does not have hash push to the home page

if (window.location.hash === "") {
  window.location.hash = "#home";
}

to listen to the page change

window.addEventListener("hashchange", (e) => {
});

as example, if you went to get posts

window.addEventListener("hashchange", (e) => {
  if (location.hash === "#posts") {
    fetch("https://sitetogetposts/posts")
      .then((res) => res.json())
      .then(setPosts)
      .catch(handleError);
  }
});

you can check the full example here

Any feedback is appreciated 🤝