code-1:
const divClass = css&>span:hover:not(.active) { cursor: pointer; };

code-2:
const divClass = css&>span:not(.active):hover { cursor: pointer; };

place ':hover' before or after ':not(.active)' can lead different result.

result-1:
.go111111111>span:hover:not(.active){cursor:pointer;}

this is right.

result-2:
.go111111111>span:not(.active).go111111111 :hover{cursor:pointer;}

this is obviously wrong.