Selector

중복 선택

• .class.class

---

다중 선택

• .class , .class

---

' '(공백)

• .class .class
• 부모 위에 있는 자식 모두 선택

---

'>' 직계 자식

• div > b

---

'~': 해당 셀렉터 "다음에 나오는" 해당 사항 "모두" 선택

• li.red ~ li

---

'+' 해당 셀렉터 "다음에 나오는" 해당 사항 "하나" 선택

• li.red + li

---

---

':hover': 마우스 커서 올릴 때

• li:hover

---

'input:focus': input창 선택할 때

---

'input:required': input창이 필수입력요소일 때

---

'input:checked': checkbox가 선택되면(margin으로 적용됐나 확인해야 함)

---

'input:disabled': input창이 disabled일 때

---

':first-child': 형제 중에 첫째만 해당

• li:first-child

':last-child': 형제 중에 막내만 해당

---

':nth-child(2n-1)': 형제 중에 2n-1번째 형제만 해당

---

':nth-last-child(n)': 뒤에서 형제 중에 n번째 형제만 해당

---

':only-child': 외동만 해당

• span:only-child

':first-of-type': 같은 타입, 같은 항렬 중에 첫째만 해당

---

span:first-of-type

':last-of-type': 같은 타입, 같은 항렬 중에 막내만 해당

---

':not()': () 빼고

• li:not(.green)

  li 중에서 green 클래스만 빼고

---

'[id='only']': id=only인 속성

---

'[class='center']': class가 center인 속성

---