2022 03 19

CSS 셀렉터¶

5. 어트리뷰트 셀렉터
- 셀렉터[어트리뷰트]
  - a[href] : a 태그 중 href 어트리뷰트 갖는 요소
  - a[target="_blank"] : a 태그 중에 target 어트리뷰트가 "_blank" 인 요소
  - h1[title ~= "first"] : h1 요소 중에 title 어트리뷰트 값에 "first"를 단어로 포함하는 요소
  - p[lang|="en"] : p 요소 중에 lang 어트리뷰트 값이 en과 일치하거나 en~ 으로 시작하는 요소
  - a[href^="https://"] : a 요소 중 href 값이 "https://" 로 시작하는 요소
  - a[href$=".html"] : a 요소 중에 href 값이 ".html" 로 끝나는 요소
  - div[class*="test"] : div 요소 중에서 class 값에 "test"를 포함하는 요소

6. 복합 셀렉터
- 후손 셀렉터 : div p - div 요소의 후손 요소 중 p (자식, 손자, 그아래 다 포함)
- 자식 셀렉터 : div > p - div 요소의 자식 요소 중 p
- 인접 형제 셀렉터 : p + ul - p 요소의 형제 요소 중 p 요소 바로 뒤에 위치하는 ul 요소 선택
- 일반 형제 셀렉터 : p ~ ul - p 요소의 형제 요소 중 p 요소 뒤에 위치하는 ul 요소 모조리 선택

7. 가상 클래스 셀렉터
- 요소의 특정 상태에 따른 스타일 적용시 사용
- :link : 방문하지 않은 링크인 경우
- :visited : 방문한 링크인 경우
- :hover : 마우스가 올라온 경우
- :active : 클릭된 상태인 경우
- :focus : 포커스가 들어온 경우
- :checked : 체크 상태인 경우
- :enabled : 사용 가능한 상태인 경우
- :disabled : 사용 불가능한 상태인 경우
- :not(셀렉테) : 셀렉터에 해당하지 않는 모든 요소
- :first-child : 셀렉터 해당 요소 중 첫번째
- :last-child : 셀렉터 해당 요소 중 마지막