css선택자란 (5.28)
https://notion6780.tistory.com/92
html/css) css 선택자 selector
⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히
notion6780.tistory.com
앞서 css선택자의 개념을 짚었다.
여기에 결합선택자의 사용법을 적어본다.
결합선택자
여러 선택자를 조합해서 더 구체적으로 대상을 선택
위치와 관계까지 고려한 개념
how
두개 이상의 선택자를 기호로 연결해 사용한다.
✨ 하위선택자 (공백)
✨ 자식선택자 (>)
✨ 인접형제선택자 (+)
✨ 일반형제선택자 (~)
하위 선택자(자손선택자)
/* cotainer 자손 p태그 글자색을 파란색으로 */
.container p {
color: aqua;
}
자식선택자
/* container 자식 p태그 글자색을 굵게 */
.container > p {
font-weight: bold;
}
인접형제선택자
/* h2 인접 p태그 배경 노랗게 */
h2 + p {
color: black;
background-color: yellow;
width: 10vw;
}
인접일반선택자
/* h2 뒤에 p태그 폰트 크기 20px */
h2 ~ p {
font-size: 20px;
}
html 구문
<body>
<div class="container">
<h3>컨테이너 제목</h3>
<p>컨테이너 문단</p>
<span>
<p>중첩된 문단</p>
</span>
</div>
<h2>주요 제목</h2>
<p>문단A</p>
<p>문단B</p>
<div>다른 박스</div>
<p>문단C</p>
</body>
'HTML CSS' 카테고리의 다른 글
| html/css) css선택자 - 속성선택자 (0) | 2025.05.29 |
|---|---|
| html/css) css선택자 - 가상클래스 선택자 (0) | 2025.05.29 |
| html/css) css선택자 - 기본선택자 (0) | 2025.05.29 |
| html/css) css에서 사용하는 주요 단위 (0) | 2025.05.28 |
| html/css) css 선택자 selector (0) | 2025.05.28 |
