구조 가상 클래스

구조 가상 클래스

• 구조 가상 클래스란 말 그대로 웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자입니다.

1. :root 가상 클래스 선택자

• 문서 안의 루트(root)요소에 스타일을 적용합니다.
• HTML 문서에서는 루트(최상위) 요소가 HTML이므로 HTML 요소에 스타일이 적용됩니다.
• 전체적으로 문서 안에 똑같이 적용할 스타일이 있을 경우 :root 선택자를 이용해 지정합니다.

2. :nth-child(n)와 :nth-last-child(n) 가상 클래스 선택자

• 웹 문서에서 특정 부분에 스타일을 적용하려면 class 나 id 선택자를 이용해 이름을 붙여주고 스타일을 정의하면 되지만 여러 개의 항목이 일렬로 나열되어 있는 경우 스티일을 지정할 항목이 몇 번째에 있는 지를 따져 스타일을 적용할 수 있습니다.
• 주로 메뉴 항목에서 이 선택자를 사용합니다.
• :nth-child(n)는 앞에서부터 n번째 자식 요소에 스타일을 적용하고 :nth-last-child(n)는 끝에서 n번째인 자식 요소에 스타일을 적용합니다.
• 위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 한 부모 요소를 갖고 있어야만 합니다. 즉 문서 구조로 표시했을 때 모두 같은 레벨의 요소여야 합니다.
• an+b 처럼 수식을 사용할 수도 있는데 이때 n값은 0부터 차례대로 정수를 대입해 계산합니다.

 

• div 요소 안에서 세 번째 자식 요소인 p 요소에 스타일 적용하는 경우
  div p:nth-child(3)
• div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용하는 경우
  div p:nth-child(odd) / div p:nth-child(2n+1)
• div 요소 안에서 짝수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용하는 경우
  div p:nth-child(even) / div p:nth-child(2n+0) / div p:nth-child(2n)

li 항목의 홀수 번째에 빨간색을 짝수 번째에 파란색 스타일을 적용한 경우

 

<style>
    .exam1 {width: 500px; border: 2px solid}
    .exam1 ul li:nth-child(2n+1) {color: red;}
    .exam1 ul li:nth-child(2n) {color: blue;}
</style>

3. :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번째 요소에 스타일을 적용합니다.
•  

li 항목의 앞에서 3번째 항목과 뒤에서 2번째 항목에 스타일을 적용한 경우

 

<style>
    .exam2 {width: 500px; border: 2px solid}
    .exam2 ul li:nth-of-type(3) {color: aqua}
    .exam2 ul li:nth-last-of-type(2) {color: coral}
</style>

4. :first-child, :last-child 가상 클래스 선택자

• :first-child 는 첫 번째 자식 요소를 선택해 스타일을 적용하고 :last-child는 마지막 자식 요소에 스타일을 적용합니다.

 

스타일을 지정하지 않은 경우

 

메뉴 항목의 첫번째와 마지막 항목에 border-radius 스타일을 적용한 경우

 

<style>
    .exam3 {width: 500px; height: 100px; border: 2px solid; }
    .exam3 ul {list-style: none; margin: 30px 0 0 30px;}
    .exam3 ul li {float: left; border: 1px solid; padding: 10px 20px; margin-right: -1px;}
    .exam3 ul li:first-child {border-top-left-radius: 1em; border-bottom-left-radius: 1em;}
    .exam3 ul li:last-child {border-top-right-radius: 1em; border-bottom-right-radius: 1em;}
</style>

5. :first-of-type, :last-of-type 가상 클래스 선택자

• 형제 관계인 요소 중에서 :first-of-type은 첫 번째 요소, :last-of-type은 마지막 요소에 스타일을 적용합니다.
• 예를 들어 레벨이 같은 p 요소들 중에서 첫번째 p 요소를 선택하거나 마지막 p 요소를 선택하여 스타일을 적용하는 것입니다.

6. :only-child, :only-of-type 가상 클래스 선택자

• :only-child는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일을 적용하며 :only-of-type은 :only-child와 비슷한데 해당 요소가 유일한 요소일 때 스타일을 적용합니다.
• 예를 들어 :only-child는 자식요소가 오직 p 요소뿐일 때(다른 자식 요소가 있으면 안됨)쓰이고 :only-of-type은 p 요소가 오직 하나뿐일 때(다른 자식 요소가 있어도 됨)일때 사용됩니다.

 

 

 

 

참고: HTML5 + CSS3 웹 표준의 정석