인프런 커뮤니티 질문&답변
작성한 질문수
복합 선택자 개념 질문 드립니다.
해결된 질문
작성
·
227
1
실습 이후 다시 강의노트를 보았을 때,
실습의 결과와 강의 자료가 다른 내용인 것 같아 이해에 어려움이 발생하여 질문드립니다.
/* 하위 선택자 */
#item-list p {
color: red;
}
/* 자식 선택자 */
#item-list > p {
color: blue;
}
</style>
</head>
<body>
<div id="item-list">
<p>첫 번째 자식 아이템 1</p>
<p>첫 번째 자식 아이템 2</p>
<div>
<p>두 번째 자식 아이템 1</p>
<p>두 번째 자식 아이템 2</p>제가 실습으로 얻은 결론은 다음과 같습니다.
1. 하위 선택자는 해당 코드의 하위 선택자 모두의 속성을 변경시키는 것이다.
2. 자식 선택자는 해당 코드의 바로 아래에 있는 선택자의 속성만을 변경시키는 것이다.
제가 이해가 가지 않는 부분은 다음과 같습니다.
1. '상위 선택자'가 무엇인지 모르겠습니다. 우리가 '하위 선택자', '자식 선택자'라고 부르는 복합 선택자를 상위 선택자라고 하는 것인가요?
2. '선택자 1', '선택자 2'의 개념을 모르겠습니다. <div> </div>로 묶인 <p> </p> 코드 하나를 (즉, 실습 내용에서 '첫 번째 자식 아이템 1, 첫 번째 자식 아이템 2 각각을) 선택자 1, 선택자 2 로 말하는 것인지, 아니면 <div> </div> 자체를 (실습 내용에서 '첫 번째 자식 아이템 1,2', '두 번째 자식 아이템 '1,2'를 묶어서) 선택자 1, 선택자 2로 말하는 것인지 헷갈립니다.
3. 강의 자료에서 복합선택자- 2. '상위 선택자의 바로 첫번째 자식으로 있는 태그들 중에서 선택자 2에 해당하는 태그를 선택합니다.' 라는 말이 이해가 가지 않습니다.
답변 2
2
안녕하세요 휘영님! 좋은 질문 감사합니다.
1. 상위 선택자는 자식 선택자를 기준으로 부모 선택자를 칭한다고 보시면 됩니다. 개념에 혼동이 생기실까봐 자료를 변경해두겠습니다!
2. 선택자1, 선택자2 는 특정 선택자를 지칭하는 것이 아니라 단순히 넘버링을 해줬다고 보시면 됩니다.
다만 여기서 내포하는 의미를 더 자세하게 풀어보면,
선택자1 : 부모, 즉 선택자2를 기준으로 상위에 있는 태그를 지칭하는 선택자이며,
선택자2 : 자손, 선택자1 내부에 있는 태그를 지칭하는 선택자라고 보시면 됩니다.
3. 첫번째 자식이라는 것은 바로 오는 자식이라고 보시면 됩니다.
(이미지 참고: https://lktprogrammer.tistory.com/98)
휘영님이 지적해주신 내용처럼 쉽게 풀어내는 과정에서 용어에 혼동이 생길 수 있겠네요. 강의 자료들과 강의는 조만간 수정을 하도록 하겠습니다! 감사합니다.
1
