[CSS] 선택자

기본 선택자

• * : 전체 선택자. 모든 요소를 선택
• ABC : 태그 선택자. 태그 이름이 ABC인 요소를 선택
• .ABC : 클래스 선택자. 클래스 속성의 값이 ABC인 요소를 선택
• #ABC : 아이디 선택자. 아이디 속성의 값이 ABC인 요소를 선택

복합 선택자

• span.orange : 일치 선택자. span과 .orange를 동시에 만족하는 요소 선택
• ul > .orange : 자식 선택자. ul의 자식 요소 .orange를 선택
• div .orange : 하위 선택자. div의 하위 요소 .orange를 선택 (띄어쓰기가 선택자의 기호)
• .orange + li : 인접 형제 선택자. 선택자 .orange의 가장 인접한 형제 요소 li 하나를 선택
• .orange ~ li : 일반 형제 선택자. 선택자 .orange의 인접한 형제 요소 li 모두 선택

가상 클래스 선택자

• ABC:hover : ABC에 마우스를 올리고있는 동안 동작
• ABC:active : ABC를 클릭하고 있는 동안 동작
• ABC:focus : ABC가 포커스되면 동작, 포커스가 가능한 요소에서만 동작 ex) input
• ABC:first-child : ABC의 형제 요소 중 첫째라면 동작
• ABC:last-child : ABC의 형제 요소 중 마지막이라면 동작
• ABC:nth-child(n) : ABC의 형제 요소 중 n번째라면 동작 ex) .fruits *:nth-child(2n)
• ABC:not(XYZ) : XYZ가 아닌 ABC 요소 ex) .fruits *:not(span)

가상 요소 선택자

• ABC::before : ABC의 내부 앞에 내용을 삽입, 인라인 요소로 내용 추가, content 속성 필수
• ABC::after : ABC의 내부 뒤에 내용을 삽입, 인라인 요소로 추가, content 속성 필수

속성 선택자

• [ABC="XYZ"] : 속성 ABC를 포함하고 값이 XYZ인 요소 ex) [type="password"]