'2024/04/28'에 해당되는 글 1건

  1. 2024.04.28 다양한 CSS 선택자 1
반응형


*** 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) / 막내요소를 제외하고 나머지 요소를 선택


반응형