- <HTML5+CSS3> 위치를 기준으로 하는 가상 클래스 선택자 목차
:root 선택자
-문서 안의 루트 요소에 스타일을 적용한다. HTML문서에서 루트 요소가 HTML이므로 HTML요소에 스타일이 적용된다.
위의 그림은 트리 형태로 표시한 웹 문서 구조에서 최상단 요소 , 즉 뿌리가 되는 부분은 <html>태그입니다. 문서 안에 전체적으로 똑같이 적용할 스타일이 있을 경우 :root 라는 선택자를 이용해 지정할 수 있다.
:nth-child(n)과 :nth-last-child(n) 선택자
-웹 문서에서 특정 부분에 스타일을 적용하려면 class나 id선택자를 이용해 이름을 붙여주고 정의하면 된다 하지만 여러개의 항목이 일렬(가로or세로)로 나열되있을 경우 지정할 항목이 몇 번째에 있는지 따져서 스타일을 적용할 수 있다. 주로 메뉴 항목에 이 선택자를 사용한다
:nth-child(n) = n번째 자식 요소에 스타일을 적용
:nth-last-child(n) = 끝에서부터 세어 n번째인 자식요소에 스타일 적용
ex)
div p:nth-child(3) /* div 요소 안에서 3번째 자식 요소인 p요소에 스타일 적용*/
div p:nth-child(odd), div p:nth-child(2n+1)
/*div요소 안에서 홀수 번째로 나타나는 자식 요소인 p요소에 스타일 적용 */
div p:nth-child(even), div p:nth-chid(2n+0), div p:nth-chid(2n)
/*div 요소 안에서 짝수 번째로 나타나는 자식 요소인 p요소에 스타일 적용*/
:nth-of-type(n), :nth-last-of-type(n) 선택자
-<p>태그가 여러 개 나열되어 있거나 <li>태그가 여러 개 나열되어 있고 각 태그에 id 나 class를 사용하지 않았다면, 몇 번째 있는 <p>태그 또는 몇 번째 있는 <li>태그처럼 몇 번째 있는 항목인지를 지정해서 스타일을 적용합니다.
:nth-of-type(n)= 앞에서 세어서 n번째 요소
:nth-last-of-type(n)= 끝에서 세어 n번째 요소
:fist-child, :last-child 선택자
first-child = 첫 번째 자식 요소에 적용할 스타일
last-child = 마지막 자식 요소에 적용할 선택자
356page 참고하면 이해가 많이 감. do it
:fist-child, :last-child 선택자
first-child = 첫 번째 자식 요소에 적용할 스타일
last-child = 마지막 자식 요소에 적용할 선택자
:first-of-type, :last-of-type 선택자
-형제 관계에 있는 요소 중에서
(1)first-of-type= 첫 번째 요소에 스타일 적용
(2)last –of-type= 마지막 요소에 스타일 적용
(1)레벨이 같은 p요소들 중 첫 번째 p요소의 글자색을 파란색 변경
ex) p:fistt-of-type {color:blue;}
(2)레벨이 같은 p요소들 중 마지막 p요소의 글자색을 빨간색 변경
ex) p:last-of-type {color:red;}
% of가 안붙으면 자식요소를 적용할 스타일 of가 붙으면 형제 관계
:only-child , :only-of-type 선택자
- only-child는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일 적용
-:only-of-type= :only-child와 비슷한데 해당 요소가 유일한 요소일 때 적용.
%!! 즉, only-child는 자식 요소가 오직 p요소 (다른 자식 요소가 있으면 안되고,) 두 번째 only-of-type은 p요소가 오직 하나밖에 없을 때 (다른 자식 요소가 있어도 됨)
ex) p:only-child {color:green ; }
ex) p:only-of-type { font-weifgt:bold;}
:target 선택자
-웹 문서에서 같은 사이트의 페이지나 다른 사이트의 페이지로 이동할 때 링크를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때는 앵커를 이용합니다.
이 선택자를 통하여 앵커로 연결된 부분, 즉 앵코의 목적지가 되는 부분을 스타일 합니다.
앵커 이름이 #intro인 곳으로 링크하게 될 경우 #intro의 배경을 노란색으로 표시
ex)#intro:target {background-color:yellow;}
'HTML&CSS > HTML5' 카테고리의 다른 글
| <HTML5+CSS3>글꼴 관련 스타일 (0) | 2018.10.16 |
|---|---|
| <HTML5+CSS3>가상클래스 (0) | 2018.10.16 |
| <HTML5+CSS3>가상 클래스 (0) | 2018.10.13 |
| <HTML+CSS3>속성 선택자 (0) | 2018.10.12 |
| <HTML+CSS3>하위선택자와 형제,그룹,자식 선택자들 (0) | 2018.10.12 |
