Slightly simpler version, making use of the :not() and :target This allows for the use of a non-hash link for the homepage. And no need for the display:block
:not()
:target
display:block
<style> section:not(:target):not(#home), section:target ~ #home { display: none } </style> <nav> <a href="/">home</a> <a href="#contact">contact</a> <a href="#about">about</a> <a href="#blog">blog</a> </nav> <main> <section id="contact">contact section...</section> <section id="about">about section...</section> <section id="blog">blog section...</section> <section id="home">home section...</section> </main>
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Slightly simpler version, making use of the
:not()and:targetThis allows for the use of a non-hash link for the homepage.
And no need for the
display:block