본문 바로가기

Web/css

6. 자식 자손 선택자

728x90

 

 

 

✔️ 자식 자손 선택자

자식 선택자(Child Selector)는 CSS에서 특정 부모 요소의 직계 자식 요소를 선택하는 선택자이다. 자식 선택자를 사용하면 부모 요소의 직계 자식에만 스타일을 적용할 수 있다.

 

자손 선택자(Descendant Selector)는 CSS에서 특정 조상 요소 내에 있는 모든 하위 요소를 선택하는 선택자이다. 자손 선택자를 사용하면 모든 하위 요소에 스타일을 적용할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자식 자손 선택자</title>
    <style>
        ul > a { font-size: 30px; }      # 자식 선택자
        ul a { color: deeppink; }        # 자손 선택자
    </style>
</head>
<body>
    <h2>자식 자손 선택자</h2>
    <ul>
        <a href="https://www.naver.com">네이버</a>
        <li><a href="https://www.google.com">구글</a></li>
        <li>다음</li>
        <li><a href="https://www.nate.com">네이트</a></li>
    </ul>
</body>
</html>

 

 

                                              👇

 

 

 

728x90

'Web > css' 카테고리의 다른 글

8. 속성 선택자  (0) 2024.07.22
7. 일반 인접 형제 선택자  (0) 2024.07.22
5. 그룹 선택자  (0) 2024.07.22
4. class 선택자  (0) 2024.07.19
3. id 선택자  (0) 2024.07.19