CSS State Styling

Pseudo-Classes with States

These definitions are used alot when working with buttons for example, like hovering, activating them. Other elements like inputs have this feature too:

The state pseudo-classes are mostly used in sites, where designing everything is mandatory - like styling the border on an input focus.

States Styling with Transitions

You can also add transitions to elements if you stop interacting with them. Heres an instance of a random form, where states and transitions are used:

Transitions here make the interactions feel modern - regular thing in nowadays websites.

Tabs Pseudo-Classing

Here the tabs act as checkboxes, which is ideal way to make this do a transition:

Using that mark "~" (General Sibling Combinator), you can target elements that you want to do an action if something is pseudo-classed (but make sure the target element is the holder of the other element).