Selector

Universal Selector

*
전체 페이지 적용

Element Selector

h1, div, img, a...
tag 별로 전체 적용

Id Selector

#idvalue

• 지정한 id value에 선택 적용
• 하나의 id value는 동일 tag 형태에 대해서만 적용 가능

Class Selctor

.classvalue
지정한 class value에 선택 적용

---

Descendant Selector

li a
li 내부에 위치(nested)한 a tag 선택 적용

.classvalue a
동일한 class value가 적힌 요소의 내부에 위치한 a tag에 선택 적용

Adjacent Selector

input + button
input 바로 뒤에 오는 button(형제 요소)에 선택 적용

Direct child Selector

ul > li
순서 없는 리스트 1단계 아래 li tag에만 선택 적용

---

Attribute Selector

input[type="text"]
text 타입의 input tag에만 선택 적용
a[href*="google"]
링크에 'google'이 포함된 a tag에만 선택 적용
a[href$=".org"]
링크가 '.org'로 끝나는 a tag에만 선택 적용

---

Pseudo Class

선택된 요소가 특정 상태일때만 적용
= 가상 선택자

:active 활성화(클릭) 될 때

:checked 버튼이 선택됐을 때

:first

:first-child 첫번째 자손

:hover 커서를 갖다 댈 때

:not()

:nth-child()

:nth-of-type(n) 형제 요소의 n번째 마다

---

Pseudo Elements

선택된 요소의 일부분에만 적용

::after

::before

::first-line 첫 줄

::first-letter 첫 글자

::selection 선택(드래그)된 영역

---

CSS 적용 우선 순위

• Casecading = 스타일이 상속되는 데 더해, 자식 요소의 스타일이 점점 추가됨

• 동일 선택자에 다른 스타일 지정 시 새롭게 적용된 스타일로 덮어씀

• Specificity : 동일 선택자에 다른 스타일을 적용해 충돌이 생길 경우 더욱 구체적인 선택자 우선

  • id
  • class attribute pseudo-class
  • element pseudo-element

• 특이도보다 우선하지만, 지양하는 방법

  • inline style
  • !important