[3] CSS 선택자

 

---

---

css

---

/* 선택자 */

- HTML 문서 전체 : * {~}

 

- 태그/요소 : 특정 태그 {~}

 

- id : #header{~}  / <~ id="header"></~>

    ➡️ #을 id로 받는다.  HTML 내에 id는 유일해야 해

 

- class : .header{~} / <~ class="header"></~>

    ➡️ .을 class로 받는다. HTML 내에 재사용 가능

 

- 그룹 : ,를 이용해 단을 나누지 않고 한 번에 사용 가능

    ➡️ h1 {} h2 {} h3 {} -> h1, h2, h3 {}

 

- 복합

    1. 일치선택자 : 조건을 만족해야 선택

        선택자가 span.orange ➡️ 태그가 <span>이면서 class="orange"를 가지고 있어야 적용

           /* css */

            span.orange {color: "red"}

           <!-- html -->

            ~~~~~~~ <li class="orange">오렌지</li>

            ~~~~~~<span class="orange">  <!-- 선택-->

---

    2. 자식선택자 : >가 기호로 사용

          형제 >(자식) ➡️ 형제 코드의 자식들 중 orange 클래스를 갖고 있는 선택자만 선택

            /* css */

          형제 > .orange {~}

            <!-- html -->

<div>들은 형제

<ul>은 형제라인의 [기준]

    <li>는 <ul>의 자식 = ul > .orange {~} 

            <!--선택-->

---

    3. 후손/자손(하위)선택자 : 공백(띄어쓰기)를 이용해 구분 ➡️ 자식, 자손을 모두 선택 가능

           /* css */

            div .orange{~}

            <!--html-->

                <div><ul><li>~~</li>

                <ul><li class="orange">오렌지</li>  <!--선택-->

                ~~~~~</ul> <div>~~~~</div>

                <span class="orange"></span> <!--선택-->

---

    4. 일반 형제 선택자 : ~가 기호로 사용 ➡️ ./class의 일반 형제들은 위, 아래로 있지만 그 "다음"에 있는

                                                            형제들이 선택된다.

            /* css */

            .orange ~ li {~}

            <!--html-->

 

---

    5. 인접 형태 선택자 : +가 기호로 사용 ➡️ "바로 뒤"에 인접한 형제만 선택

            /* css */

            .orange + li {~}

            <!-- html -->

            <ul> <li>~~</li>

            <li class="orange">오렌지</li>  <!--선택-->

            <li>망고</li>

            ~~</ul>

---

     6. 형제 그룹 중 첫 번째 요소 ➡️ :first-child

     

     7. 형제 그룹 중 마지막 요소 ➡️ :last-child

     

     8. 형제 사이의 순서에 따라 요소 선택 ➡️ :nth-child(n) ;형제 중 n번째 요소 선택

             [n 변수 사용시 0부터 1씩 증가 = 2n;짝수 2n-1;홀수 / (odd);홀수 / (even);짝수]

     

     9. 부정 선택자 ➡️ :not(s) ;s라는 선택자를 제외하고 선택

    

     10. 방문하지 않은 링크 ➡️ :link

    

     11. 방문한 링크 ➡️ :visited

    

     12. 마우스 포인터가 올라가 있는 동안 ➡️ (h1/a):hover

    

     13. 마우스로 클릭하는 동안 ➡️ (.box):active

    

     14. 포커스 된 동안 ➡️ (input):focus

---

이러한 형제그룹요소를 게임으로 익히도록 많든 사이트

CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io)

---