하위(자손) 선택자.
Desecent는 자손이라는 뜻입니다. 그래서 자손 선택자 또는 하위 선택자라고도 불립니다.
즉, HTML 부모 자손 관계를 활용한 CSS 선택자입니다. 자손에는 자식, 손자 등이 포함되겠습니다.
하위 선택자 문법 입니다.
상위요소 하위요소{
속성:값;
}
상위요소 다음에 오는 빈칸(공백문자) 이 바로 하위선택자의 기호가 되겠습니다. 이 공백문자 뒤에는 자손요소인 자식 태그 와 그 자식태그의 전역 속성인 id 혹은 class 등이 올 수 있습니다.
예제를 만들어 보겠습니다.
[index.html]
하위 선택자를 위해서 div 부모 태그 밑에 자손요소로 h2 와 p태그를 구성했고 태그 안에 id와 class 전역 속성도 추가했습니다.
<body>
<div>
<!-- 하위 선택자 -->
<h2 id="DC">This is a Descendant Combinator.</h2>
<!-- 태그 와 클래스 선택자 조합 -->
<h2 class="DC2">This is a Descendant Combinator.</h2>
<!-- 태그, 클래스 그리고 아이디 선택자 조합 -->
<h2 class="DC2" id="DCid">This is a Descendant Combinator.</h2>
<p>This is a myParagraph.</p>
<p>This is a myParagraph 2.</p>
</div>
</body>[main.css]
div 부모 태그를 선택자 첫번째 자리인 상위요소 위치에 코딩하고 한 칸 띄운 후
하위요소 인 자식 태그 혹은 자식 태그의 전역 속성을 코딩 했습니다.
/* CSS 코드 */
div #DC{
color: blue;
}
div .DC2{
color: yellowgreen;
}
div h2.DC2#DCid{
color: orangered;
}
div p{
color: violet;
}원하는 결과값이 잘 나올까요?
네. 하위 선택자를 이용하여 특정 HTML 요소에 알맞은 스타일 시트를 적용했습니다.
div 하위요소 인 p태그의 경우 두개의 요소가 모두 색상이 적용되었습니다.
이처럼, HTML 상위요소 하위요소 를 적용한 "하위선택자"를 사용하면 원하는 html 요소에 스타일을 편리하게 적용할 수 있습니다. 하위선택자에 대해서 정리해보았습니다.
하위 선택자는 W3 shool 사이트에서 테스트 해볼 수 있습니다.
감사합니다.
CSS element element Selector
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'앱 만들기 > CSS study' 카테고리의 다른 글
| CSS 일반 형제 선택자(General Sibling Combinator) (1) | 2023.06.11 |
|---|---|
| CSS 인접형제 선택자(Adjacent Sibling Combinator) (3) | 2023.06.10 |
| CSS Child Combinator(자식 선택자) (1) | 2023.06.08 |
| CSS Basic Combinator (일치선택자) (2) | 2023.06.07 |
| CSS 기본 선택자 네가지 (0) | 2023.06.06 |
댓글