Shape transition with :target - html

Question

How to :target 1 little red box to do transition into a yellow circle by clicking hyperlink and then make the same little box to transition into a blue square?
Here is my CSS for the little red square:
#Redsquare{
height: 15px;
width: 15px;
background-color: rgb(255,0,0);
position: absolute;
top: 330px;
left: 640px;
transition: all 0.5s linear;
}
Here is the code which targets the #Redsquare into yellow circle.
#Redsquare:target{
height: 300px;
width: 300px;
border-radius: 50%;
background-color: rgb(255,255,0);
top: 200px;
left: 500px;
}
But I want the same little circle to transform into a Bluesquare as well by pressing another button.

Answer 1

This can be done. But it requires nesting in the HTML like shown in the code below. Please do not use this approach if you need the same div to be transformed more than two or three times as the markup will become too messy.
Basically what we are doing here is as follows:
The element that will be transformed is the div with class as box. But how and what it would be transformed to depends on the link that is clicked and the associated target.
When the 1st link is clicked, the outermost div with Yellowcircle is the target. As per the CSS, an element with class box will be transformed to a yellow circle when the target is Yellowcircle.
When the 2nd link is clicked, the Bluesquare div becomes the target and as per CSS in this case, the box should become a blue square.
Finally when the 3rd link is clicked, the target is the general #, so the default .box CSS style will be applied and it goes back to being a red square.
There are other alternatives but they involve JavaScript.
.box {
height: 150px;
width: 150px;
background-color: rgb(255, 0, 0);
transition: all 0.5s linear;
}
#Yellowcircle:target .box {
border-radius: 50%;
background-color: rgb(255, 255, 0);
}
#Bluesquare:target .box {
background-color: rgb(0, 0, 255);
}
/* Just for demo */
a {
position: relative;
margin: 0px 4px;
text-decoration: none;
font-family: Calibri;
font-variant: small-caps;
color: crimson;
}
a:after {
position: absolute;
content: "|";
padding: 0px 4px;
}
a:last-of-type:after {
display: none;
}
<div id='Yellowcircle'>
<div id='Bluesquare'>
<div class='box'>
</div>
</div>
</div>
<a href='#Yellowcircle'>Transform to yellow circle</a>
<a href='#Bluesquare'>Transform to blue square</a>
<a href='#'>Go back to default</a>
This is what I meant by markup becoming messy while needing to transform into more than 3 shapes. Notice how we have to introduce an extra level for each extra shape that is needed.
.box {
height: 150px;
width: 150px;
background-color: rgb(255, 0, 0);
transition: all 0.5s linear;
}
#Yellowcircle:target .box {
border-radius: 50%;
background-color: rgb(255, 255, 0);
}
#Bluesquare:target .box {
background-color: rgb(0, 0, 255);
}
#Greenoval:target .box {
border-radius: 75px 100px;
background-color: rgb(0, 255, 0);
}
/* Just for demo */
a {
position: relative;
margin: 0px 4px;
text-decoration: none;
font-family: Calibri;
font-variant: small-caps;
color: crimson;
}
a:after {
position: absolute;
content: "|";
padding: 0px 4px;
}
a:last-of-type:after {
display: none;
}
<div id='Yellowcircle'>
<div id='Bluesquare'>
<div id='Greenoval'> <!-- notice how for each shape we need to add an extra level -->
<div class='box'>
</div>
</div>
</div>
</div>
<a href='#Yellowcircle'>Transform to yellow circle</a>
<a href='#Bluesquare'>Transform to blue square</a>
<a href='#Greenoval'>Transform to green oval</a>
<a href='#'>Go back to default</a>