CSS 선택자 정리

태그 불러오는 방법 : 태그 명을 쓴다.

ex) p태그를 불러올때는 p {css 속성} 라고 쓰면됩니다. 태그 명을 쓴다.

---

클래스 불러오는 방법 : .내가정한클래스이름

---

하위 자식 엘리먼트를 불러오는 방법 : 상위엘리먼트 "띄어쓰기" 하위 엘리먼트 호출

이때 띄어쓰기만 하면 상위엘리먼트 아래의 모든 하위엘리먼트가 선택됩니다.

ex) .top-bar p = class 명이 top-bar 인 엘리먼트 자식인 모든 p 태그

---

하위 직계 자식 엘리먼트를 불러오는 방법 : 상위엘리먼트 ">" 하위 엘리먼트 호출

ex) .top-bar > p = class 명이 top-bar 인 엘리먼트 직계자식인 p 태그

---

형제 엘리먼트를 불러오는 방법 : 상위엘리먼트 "~" 하위 엘리먼트 호출

ex) .top-bar ~ p = class 명이 top-bar 인 엘리먼트 다음에 오는 모든 p 태그

---

직계 형제 엘리먼트 를 불러오는 방법 : 상위엘리먼트 "+" 하위 엘리먼트 호출

ex) .top-bar + p = class 명이 top-bar 인 엘리먼트 바로 다음에 오는 p 태그

---

첫 번째 엘리먼트 를 불러오는 방법 : 엘리먼트 뒤에 :를쓰고 first-child

ex) .top-bar > p:first-child = class 명이 top-bar 인 엘리먼트의 직계자식중에 첫번째로 오는 p 태그

---

마지막 엘리먼트 를 불러오는 방법 : 엘리먼트 뒤에 :를쓰고 last-child

ex) .top-bar > p:last-child = class 명이 top-bar 인 엘리먼트의 직계자식중에 마지막에 오는 p 태그

---

n 번째 엘리먼트 를 불러오는 방법 : 상위엘리먼트 "+" 하위 엘리먼트 호출

ex) .top-bar > p:nth-child(n) = class 명이 top-bar 인 엘리먼트의 직계자식중에 n번째에 오는 p 태그

n 에는 정수가 올수 도 있고 수식도 올 수 있다.

ex) .top-bar > p:nth-child(3) = class 명이 top-bar 인 엘리먼트의 직계자식중에 3번째에 오는 p 태그

ex) .top-bar > p:nth-child(2n) = class 명이 top-bar 인 엘리먼트의 직계자식중에 2n(짝수)번째에 오는 p 태그

ex) .top-bar > p:nth-child(2n-1) = class 명이 top-bar 인 엘리먼트의 직계자식중에 2n-1(홀수)번째에 오는 p 태그