[CSS] 클래스 선택

📌특정 요소 내부에 있는 특정 클래스만 선택하기

 

✅  HTML  - 만일 <p>자식2</p>가 있다면 사용 못함 ! 

    <ul id="test4-1">
        <li class="c4">1</li>
        <li class="c4">2</li>
        <li class="c4">3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ul id="test4-2">
        <li class="c4">6</li>
        <li class="c4">7</li>
        <li class="c4">8</li>
        <li>
            <span class="c4">9</span>
        </li>
        <li>
            <span class="c4">10</span>
        </li>

        <p class="c4">11</p>
        <p class="c4">12</p>

    </ul>

 

✅  CSS

/* 특정 요소 내부에 있는 특정 클래스만 선택 */
/* #test4-1의 후손 중 클래스가 c4인 요소 선택 */
#test4-1 .c4{
    background-color: darkmagenta;
}

/* #test4-2의 자식 클래스가 c4인 li요소만 선택 */
#test4-2 > li.c4{
    background-color: darkturquoise;
}

✅  결과

 

📌 여러 선택자 동시 선택 

 

✅  HTML

    <div id="test5-1">테스트1</div>
    <div id="test5-2">테스트2</div>
    <div id="test5-3">테스트3</div>

✅  CSS

/* 여러 선택자 동시 선택 */
#test5-1,#test5-2,#test5-3{
    border: 1px solid black;
    background-color: rebeccapurple;

✅  결과

📌클래스가 여러개인 요소만 선택

✅  HTML

  <div class="test6">테스트</div>
    <div class="test6 c6">테스트</div>
    <div class="c6">테스트</div>

✅  CSS

/* 클래스가 여러개 인 요소만 선택 */
.test6.c6{
    background-color: chartreuse;

✅  결과