인프런 커뮤니티 질문&답변

안녕하세요. 답변 도우미입니다.

CSS 선택자를 사용하면 HTML 요소를 선택하는 방법을 정의할 수 있습니다. 여기서 사용된 선택자는 다음과 같은 의미를 가지고 있습니다:

• ul#dev_course_list > li.course.paid: 이 선택자는 "id가 dev_course_list인 ul 요소의 직접적인 자식 중 class가 course이면서 동시에 class가 paid인 li 요소들"을 선택합니다.

• > 연산자는 직접적인 자식 요소를 가리킵니다. 즉, > 앞의 요소 바로 아래에 있는 요소만을 선택합니다. 만약 > 대신 공백 를 사용했다면, ul#dev_course_list 요소 아래에 있는 모든 후손 요소 중 class가 course이고 paid인 li 요소들이 선택될 것입니다.

• ul#dev_course_list > li.course#begin: 이 선택자는 "id가 dev_course_list인 ul 요소의 직접적인 자식 중 class가 course이면서 동시에 id가 begin인 li 요소들"을 선택합니다.

다시 말해서, ul#dev_course_list > li.course.paid 선택자는 dev_course_list라는 id를 가진 ul 요소의 바로 아래에 있는 li 요소 중에서, class가 course이고 paid인 요소들만을 선택합니다. 만약 해당하는 요소가 없다면, 아무것도 선택되지 않을 것입니다.