가상 클래스 (:hover, :first-child, :nth-child)
A: link
아직 방문하지 않은 페이지의 링크에
A:visit
이미 방문한 페이지의 링크에
A:hover
해당 요소에 마우스를 올렸을 때
A:active
해당 요소를 선택 또는 마우스 클릭을 했을 경우
P:focus
해당 요소에 포커스(초점)이 옮겨졌을 때
P:target
링크를 특정 위치로 이동시킬 때, 그 이동 타겟이 되는 P요소에
P:enabled
disabled 속성이 설정되어 있지 않은 P요소에.
P:disabled
disabled 속성이 설정되어있는 P 요소에
P: checked
P요소에 라디오 버튼, 체크 박스 등이 선택 됐을 때
P:nth-child()
같은 부모 요소내의 n번째 자식 요소들(P 요소들)에 대해.
()안에는 2n(2의 배수번째 요소들), 2n+1 (2의 배수에 1을 더한 순번째의 요소), odd (홀수번째), even (짝수번째) 등의 수식을 지정할 수 있음.
P:nth-last-child()
같은 부모 요소 내에서 뒤에서부터 n번째의 자식 요소들(P요소)에 대해.
요소의 종류는 관계없이 순번대로 세어서, n번째에 지정 요소가 있다면 스타일이 적용됨.
()안에는 2n, 2n+1, odd, even 등의 수식을 사용할 수 있음.
P:nth-of-type()
같은 부모 요소 내에서 n번째의 자식 요소들(P요소)에 대해.
중간에 다른 종류의 요소가 있으면 그 요소는 건너뛰고 n번째에 지정요소가 있을 경우 스타일이 적용됨.
()안에는 2n, 2n+1, odd, even 등의 수식을 사용할 수 있음.
P:nth-last-of-type()
같은 부모 요소 내에서 뒤에서부터 n번째의 자식 요소들(P요소)에 대해.
중간에 다른 종류의 요소가 있으면 그 요소는 건너뛰고 n번째에 지정요소가 있을 경우 스타일이 적용됨.
()안에는 2n, 2n+1, odd, even 등의 수식을 사용할 수 있음.
P:last-child
부모 요소 안의 제일 마지막에 있는 자식 요소(p요소)에
P:first-of-type
같은 부모 요소 안의 자식 요소 중 제일 처음에 있는 P요소
다른 종류의 형제 요소 (a, div, span 등)가 앞에 와도 무시하고 제일 처음에 있는 p요소를 대상으로만 함.
P:last-of-type
같은 부모 요소 안의 자식 요소 중 제일 마지막에 있는 P요소
다른 종류의 형제 요소 (a, div, span 등)가 앞에 와도 무시하고 제일 처음에 있는 p요소를 대상으로만 함.
P:only-of-thpe
부모 요소 안의 자식 요소 중에서 P요소가 하나 밖에 없는 경우
P:empty
P요소 내에 자식 요소 혹은 텍스트 등의 데이터가 없을 경우
P:not()
()안에 지정한 선택자와 일치하지 않는 요소를 대상으로.
'HTML,CSS' 카테고리의 다른 글
HTML 스터디 : 태그 종류 (0) | 2020.12.15 |
---|---|
HTML 스터디 : 태그 간단 정리 (0) | 2020.12.14 |
20200806. 반응형 레이아웃 (0) | 2020.08.06 |
20200806. 반응형레이아웃 (0) | 2020.08.06 |
20200731. 사이드바 (0) | 2020.07.31 |