I was working on a FreeCodeCamp's project , and I was looking for new ideas even though they only need to perform some simple tasks, accidentally I fond the :target pseudo class in the MDN docs, exactly in the lightbox section

how this selector works

the first thing you should know is that the :target selects the element when its id and the hash in the URL are the same, and that's happens when you visit a link which refers to that element ... for example

if we link a section by an anchor tag

<!-- the link -->
<a href="#changed_element">link</a>

<!-- the linked element -->
<section id="changed_element">
    the changed element
</section> 

now let's change the section's style when the user click on the link that refers to it by adding the :target selector.

#changed_element:target{
    background-color: #000;
    color: #fff;
}

so this selector selects the visited elements

hmmmm so if we want to hide and show elements using this selector we only need to specify their display before and after clicking on their links

example

<!-- nav links -->
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
</ul>


<section id="home">
    home's content
</section>


<section id="about">
    about's content
</section>


<section id="services">
    services's content
</section>

/* the default display by hiding the elements  */

#home, #about, #services{
    display: none;
}

/* showing the element that has been clicked in the nav-linkd */

#home:target, #about:target, #services:target{
    display: block;
}

so if the user click on a link .. the browser will show the hidden content of that link ... and if he click on other element, the previous element will be hidden again cause he is not targeted and the new link's content will appear

you can change the styles that you want this is just an example ... you can visit this website to see how he made a full website with a single html file
this is my first article in a dev community SO I'm sorry if my explanation was bad (maybe) ... i hope that this article is useful to you and you like it

resources

• the MDN docs link
• article about a image gallery using only css and :target element in hacks.mozilla
• an article about some uses of that selector on css-tricks link
• my freecodecamp project