Uncaught (in promise) DOMException: Failed to execute 'querySelector' on 'Document': '#weather span : first-child' is not a valid selector.

내 위치의 날씨를 알 수 있는 코드를 작성중에 위와 같은 에러가 떳다.

에러의 위치는 아래의 부분이었다.

const weather = document.querySelector("#weather span : first-child");

에러를 해석해보면 '#weather span: first-child'는 유효한 선택자가 아닙니다. 라는 뜻인데 아무리 봐도 오타를 찾을수가 없었다. 검색을 해봐도 잘 찾아지지가 않아서 이것 저것 손을 대보았는데

결론은

span : first-child");

여기서 span뒤에 두 개의 띄어쓰기가 문제였다.

span:first-child");

위와 같이 : 양 옆의 띄어쓰기를 없애주니 에러가 해결되었다.

띄어쓰기가 문제라는걸 알게 되어서 처음에 : 양쪽 옆을 다 띄어썼었던걸 :의 왼쪽 오른쪽을 하나씩만 띄어쓰기를 해봤는데 오른쪽만 띄어쓰기를 사용했을때는 양 쪽 다 띄어쓰기를 했을때와 같은 에러 메시지가 떴지만 :의 왼쪽만 띄어쓰기를 썼을때는 다른 에러 메시지가 떴다.

위의 에머 메시지가 :의 왼쪽만 띄어쓰기를 썼을 때 나오는 에러 메시지이다.
해결방법은 마찬가지로 :의 왼쪽 띄어쓰기를 없애주면 되었다.
이 에러 메시지는 보통 script태그가 body의 제일 아래쪽에 위치하지 않았을 때 봤었던 것 같은데 이럴때도 뜬다니 신기했다.