ㅇㅇㅇ
"> Document
ㅇㅇㅇ
"> Document
ㅇㅇㅇ
"> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 바로 그 다음 요소만 선택 */

        /* .ex + .next {
            color: blue;
        } */

        /* 그 뒤에 형제들 선택 */
        .ex ~ .next {
            color: blueviolet;
        }

        /* 
        실전 유용 활용 
        같은 box 클래스 뒤에 box 클래스가 있어야 적용되기 때문에 앞에 box 클래스가 없는 첫번째는 적용되지 않는다.
        */
        .box {display: inline-block; width: 200px; height: 200px; background-color: blueviolet;}
        .box + .box {margin-left: 40px;} 

    </style>
</head>
<body>
    <div class="ex">ㅇㅇㅇ</div>
    <div class="next">응그래</div>
    <div class="next">어럼아</div>

    <!-- 1번만 마진라이트 안주기 -->
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>