Now, #site_index .square-box:active gets crossed in Chrome inspector. Why? It is the same element, but the other one is on :active. Can I do something to get this effect on :active?
1) Your CSS calls for #site_index .square-box:active, there is no #site_index.
2) Even removing that, yes inline styles will overwrite :active, :hover, etc.