HTML,CSS

HTML 스터디 : CSS 가상 클래스

업무 중 2020. 12. 16. 16:03

가상 클래스 (: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()

()안에 지정한 선택자와 일치하지 않는 요소를 대상으로.

 

 

출처:blog.naver.com/skydoor2014/220561749682 

'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