Show/hide content based on anchor; show first by default - html

Question

With pure HTML and CSS it is possible to show and hide content with an anchor tag:
#red { background: red; }
#blue { background: blue; }
#green { background: green; }
.box {
width: 200px;
height: 200px;
display: none;
}
.box:target {
display: block;
}
Red item | Blue item | Green item
<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>
But how can I display the first (red) item on page load?

Answer 1

If you're ok with modifying the html, and putting the red box last then you can do something like:
#red {
background: red;
display: block;
}
#blue { background: blue; }
#green { background: green; }
.box {
width: 200px;
height: 200px;
display: none;
}
.box:target {
display: block;
}
.box:target ~ #red {
display: none;
}

Answer 2

The solution is somehow easy but I cannot show it here. If you are using this code within a page you simply need to append the anchor of the the first a tag to the url to activate its target. So you need to simply do something like this:
wwww.page.html#red
Here is a screenshot of the result:
This will work without modifying the code and you can choose which one to make visible at the start.

Answer 3

You can try this:
#red { background: red; display:block;}
#blue { background: blue; }
#green { background: green; }
.box {
width: 100%;
height: 100%;
display: none;
position: absolute;
top: 0;
left: 0;
}
.box:target {
display: block;
}
.wrapper {
position: relative;
width: 200px;
height: 200px;
}
Red item | Blue item | Green item
<div class="wrapper">
<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>
</div>

Answer 4

Solution(s) :-
<style>
#red {
background: red;
}
#blue {
background: blue;
}
#green {
background: green;
}
.box {
display: none;
}
.box:target {
display: block;
}
</style>
Red item |
Blue item |
Green item
<div class="box" id="red">Red</div>
<div class="box" id="blue">Blue</div>
<div class="box" id="green">Green</div>
Explanation(s) :-
I Finally found a solution for your answer but ...
for it to work properly , you need to add a background color ....
finally , I hope that it is what you wanted .....
Notes And References :-
currently , i have no references for above codes ,
but ,
NOTE : Please Add Background color fr it to work properly