선택자를 특정 클래스 바로 밑에 있는 요소에만 적용

<div class="col_table_head">
    <div class="col_table_row">
        <div class="col_table_cell">제품</div>
        <div class="col_table_cell">가격</div>
        <div class="col_table_cell">수량</div>
        <div class="col_table_cell">합계</div>
        <div class="col_table_cell"></div>
    </div>
</div>

<div class="col_table_body">
    <div class="col_table_row">
        <!-- 제품 -->
        <div class="col_table_cell prd_wrap tal">
            <div class="prd">
                <div class="check">
                </div>
                <div class="prd_thumb">
                </div>
                <div class="prd_info">
                </div>
            </div>
        </div>
        <!-- 가격 -->
        <div class="col_table_cell prd_price">
            14,900
            <span class="won">원</span>
        </div>
        <!-- 수량 -->
        <div class="col_table_cell prd_count">
            <div class="count_ui_box">
                <button class="minus">-</button>
                <input type="text" readonly="" class="count" value="1">
                <button class="plus">+</button>
            </div>
        </div>
    </div>

 

 

위 아래 둘다 공통으로 적용하고 싶어서 아래처럼 적용했더니

.order_list .col_table_row {
    display: flex;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black-3);
    border-bottom: 1px solid var(--color-light-grey-2);
    padding: 20px 16px;
    background-color: var(--color-light-grey);
    
    :nth-child(1) { width: 50%; }
    :nth-child(2) { width: 14.3%; }
    :nth-child(3) { width: 14.3%; }
    :nth-child(4) { width: 15%; }
    :nth-child(5) { width: 6.4%; }
}

.col_table_row 첫번째 자식요소 안에 있는 모든 요소에 다 width 가 적용돼고 그 안에서 아무리 다른 값을 적용해도 :nth-child(n) 의 값이 적용됐다

.order_list .col_table_row {
    display: flex;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black-3);
    border-bottom: 1px solid var(--color-light-grey-2);
    padding: 20px 16px;
    background-color: var(--color-light-grey);
}

.col_table_row > :nth-child(1) { width: 50%; }
.col_table_row > :nth-child(2) { width: 14.3%; }
.col_table_row > :nth-child(3) { width: 14.3%; }
.col_table_row > :nth-child(4) { width: 15%; }
.col_table_row > :nth-child(5) { width: 6.4%; }

특정 클래스 바로 밑에 있는 요소에 적용하고 싶다면, :nth-child 선택자와 함께 부모 선택자를 사용하여 구조를 제한할 수 있다