*** CSS 선택자
태그 선택자 / h1 / 태그로 요소 선택
전체 선택자 / *, / 모든 요소 선택
/ div * / 특정 요소의 자식요소 모두 선택
클래스 선택자 / .slide / 클래스명으로 요소 선택
아이디 선택자 / #memid / 아이디명으로 요소 선택
후손 선택자 / .slide h2, .slide .btn / 후손(자식) 요소 선택
자식 선택자 / .slide > div / 앞 선택자의 바로 밑 자식요소 선택
인접형제 선택자 / .banner + div / 앞 선택자의 형제 요소 바로 다음 요소 선택
/ .banner ~ div / 앞 선택자의 형제 요소 형제요소 중 두 번째 요소 모두를 선택
그룹화 / h1, h2color:red / 콤마로 선택자를 나열하여 선택
속성 선택자 / a[target], a[target="_blank"] / 속성명 또는 속성명의 값으로 요소를 선택
가상 선택자 / :visited / 방문한 링크 선택
/ :hover / 요소에 마우스를 올렸을 때
/ :active / 링크를 누르는 순간
/ :focus / 링크, 버튼, 입력요소 등에 초점이 이동했을 때
/ input:checked / input에 체크되었을 때
의사 요소 선택자 / h1:after content:'-'; / :before, :after (내용의 앞, 뒤)
구조 선택자 / :first-child, :last-child / 첫째 요소, 막내 요소
/ :nth-child(2n), :nth-child(2n+1) / 특정 번재 요소를 수식으로 선택
/ :nth-child(even), :nth-child(odd) / 짝수, 홀수 요소 선택
형태구조 선택자 / :first-of-type , :last-of-type, :nth-of-type(2n) / 같은 태그종류 중 첫째, 막내, 특정 번째 요소를 선택
부정 선택자 / :not(p) / 괄호 안 선택자의 반대 요소를 선택
/ li:not(:last-child) / 막내요소를 제외하고 나머지 요소를 선택
'개발 및 관리 > HTML, CSS, Javascript, DOM' 카테고리의 다른 글
CSS, grid 관련 속성들 (0) | 2024.05.07 |
---|---|
CSS FLEX (0) | 2024.04.29 |
input 태크 readonly, required (0) | 2024.04.24 |
CSS 속성 선택자 (0) | 2024.04.24 |
CSS, 테두리 스타일을 지정하는 border-style 속성 (0) | 2024.04.21 |