How to set a default styling to element if :target doesn't exist

Question

I have a header with 3 links, all linking to a specific div with a corresponding id:

Answer 1

Follow below the snippet, hope your problem will fix with html and css,

body {
  font-size: 32px;
}

.links {
  display: flex;
  a {
    padding: 10px;
  }
}

.box:not(:target) {
  display: none;
}
#box1{
  display: block;
}
#box2:target ~ #box1,
#box3:target ~ #box1{
  display: none;
}




#box1 {
  background-color: crimson;
  
}

#box2 {
  background-color: darkgreen;
}

#box3 {
  background-color: gold;
}

  Box1
  Box2
  Box3



Box2 content
Box3 content

Box1 content

the box1 is default and when you trigger the box2, box3 you can see box1 will get display none. mainly it's working for "general sibling selector (~)"