복합 선택자 개념 질문 드립니다.
실습 이후 다시 강의노트를 보았을 때,
실습의 결과와 강의 자료가 다른 내용인 것 같아 이해에 어려움이 발생하여 질문드립니다.
/* 하위 선택자 */
#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)
휘영님이 지적해주신 내용처럼 쉽게 풀어내는 과정에서 용어에 혼동이 생길 수 있겠네요. 강의 자료들과 강의는 조만간 수정을 하도록 하겠습니다! 감사합니다.
[해결]그랩님 답변 주세요.
0
160
2
그랩님의 답변을 기다립니다/102강 전반적인 에러
0
140
2
[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.
0
122
2
[재질문][그랩님 답변 부탁드립니다]101강
0
135
2
[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문
0
96
2
Ngrok 설치 후 forwarding Url 에러
0
129
2
[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.
0
215
2
Ngrok 설치 후 forwarding Url로 연결 불가
0
133
1
그랩님,[꼭] 답변 부탁드립니다.
0
64
1
[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.
0
148
1
6강/7강 수업
0
49
1
그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.
0
98
2
그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.
0
133
2
[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
0
88
1
Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
0
126
2
일반적인 css 꾸미기에서 width와 height의 값?
0
87
2
Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법
0
191
1
그랩마켓 웹화면 구현하기 -2 질문입니다.
0
118
1
react에 반영이 되지 않습니다.
0
234
1
터미널 npm install -g create-react-app 작성 후 오류
0
418
1
create-react-app my app 실행 시 에러
0
352
2
포스트맨 질문
0
98
1
<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.
0
258
2
그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.
0
472
2