CSS 선택자 공백이 의미하는 것

먼저 CSS 선택자에 대해 간단히 정리해보겠습니다. . (점) = 클래스 .select { } # (해시태그) = id #footer { } 아무것도 없음 = HTML 태그 ol { } CSS 선택자에서 공백(띄어쓰기)이 있으면 하위 엘리먼트에서 모두 조건에 맞는 엘리먼트를 찾고, 붙어있으면 같은 엘리먼트에서 모든 조건에 맞는 엘리먼트를 찾습니다. 예를들어 html 내 .footer 하위에 # select 클래스가 존재하면 둘은 띄어써야 합니다. (공백이 있어야 하는 경우) HTML <h1 id="footer"> <p class="select"> </p> </h1> CSS .footer #select { } 반대로 article 태그와 .text 클래스처럼 같은 수준으로 존재하면 붙여써야 합니다. (공백이 없어야 하는 경우) HTML <article id=text> </article> CSS article.text { }...

원문링크 : CSS 선택자 공백이 의미하는 것