본문 바로가기
Web/CSS

[CSS] 연결 선택자

by print_soo 2023. 5. 3.

1. 하위(자손) 선택자

: 부모 요소에 포함된 하위 요소를 모두 선택한다. 즉, 자식요소뿐만 아니라 손자 요소, 손자의 손자 요소등 모든 하위 요소까지 적용된다. 

❗️A B{ ...}❗️

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul li{ /* 선택자를 쓸 때 ul li 처럼 띄워쓰기를 하면 ul 아래에 있는 li만 해당 되게 된다.*/
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <ol id="lecture"">
        <li>HTML</li>
        <li>CSS</li>
            <ol>
                <li>HTML2</li>
                <li>CSS2</li>
            </ol>
        <li>JavaScript</li>
    </ol>
</body>
</html>

2. 자식 선택자

: 하위 선택자와 는 다르게 자식 요소에만 스타을 적용하는 선택자이다.

❗️A>B{ ... }❗️

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #lecture>li{ /* >를 쓰면lecture라는 아이디를 가진 태그의 바로 아래 태그들만 해당 내용은 적용한다.*/
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <ol id="lecture"">
        <li>HTML</li>
        <li>CSS</li>
            <ol>
                <li>HTML2</li>
                <li>CSS2</li>
            </ol>
        <li>JavaScript</li>
    </ol>
</body>
</html>
❗️{ ... }❗️

 

3. 인접 형제 선택자

❗️A+B{ ... }❗️
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       h1 + p {
        background-color: #222;
        color: #fff;
       }
    </style>
</head>
<body>
    <h1>예약 방법 & 이용 요금</h1>
    <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
    <p>가족실(2~4인) : 60,000원/일</p>
    <p>도미토리(4인 공용) : 25,000원/일</p>
</body>
</html>

 

4. 형제 선택자

❗️A~B{ ... }❗️
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       h1 ~ p {
        background-color: #222;
        color: #fff;
       }
    </style>
</head>
<body>
    <h1>예약 방법 & 이용 요금</h1>
    <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
    <p>가족실(2~4인) : 60,000원/일</p>
    <p>도미토리(4인 공용) : 25,000원/일</p>
</body>
</html>

 

 

저작자표시 비영리

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

[CSS] font-size  (0) 2023.05.06
[CSS] 구조 가상 클래스  (0) 2023.05.03
[CSS] 속성 선택자  (0) 2023.05.03
[CSS] 가상 클래스 선택자  (0) 2023.05.01
[CSS]기본 선택자  (0) 2023.04.30

관련글

티스토리툴바