You may be familiar with pseudo selectors like
:nth-child(n). These are super useful for every day use. There is one pseudo selector you may not be aware of. The way
:target works is if the location hash matches an element it will trigger the
:target pseudo selector on that element. For instance, if my url is
mysite.com#article the element with the id
#article will trigger the
:target pseudo selector supports CSS animations and transitions.
This means you can easily animate between states, this gives you quite a bit of power!
Below is an example of an animating modal with just CSS.