css

CSS - 구조 가상 클래스

2월 25, 2019
구조 가상 클래스란 특정한 위치에 있는 태그를 찾아 스타일을 적용할 수 있습니다.

이벤트 설 명
:nth-child(an+b) n번째 요소와 유형이 일치하는 요소.
n의 수는 유형에 관계없는 요소를 포함한 수.
  • a: 배수
  • n: 카운터. 0부터 시작
  • b: 시작위치
키워드
  • odd: 홀수로 지정.
  • even: 짝수로 지정.
      Ex.) :nth-child(odd)
:nth-last-child(an+b) 마지막 요소에서 시작해서 n번째 요소와 유형이 일치하는 요소.
n의 수는 유형에 관계없는 요소를 포함한 수.
  • a: 배수
  • n: 카운터. 0부터 시작
  • b: 시작위치
키워드
  • odd: 홀수로 지정.
  • even: 짝수로 지정.
      Ex.) :nth-last-child(odd)
:nth-of-type(n) n번째 요소와 유형이 일치하는 요소.
n의 수는 같은 유형의 요소만 개수를 셉니다.
  • a: 배수
  • n: 카운터. 0부터 시작
  • b: 시작위치
키워드
  • odd: 홀수로 지정.
  • even: 짝수로 지정.
    Ex.) :nth-of-type(odd)
nth-last-of-type(n) 마지막 요소에서 시작해서 n번째 요소와 유형이 일치하는 요소.
n의 수는 같은 유형의 요소만 개수를 셉니다.
  • a: 배수
  • n: 카운터. 0부터 시작
  • b: 시작위치
키워드
  • odd: 홀수로 지정.
  • even: 짝수로 지정.
      Ex.) :nth-last-of-type(odd)
:first-child 유형에 관계없이 처음 요소가 찾는 요소라면 적용.
:last-child 유형에 관계없이 마지막 요소가 찾는 요소라면 적용.
:first-of-type 같은 유형의 요소가 처음으로 나오는 요소.
:last-of-type 같은 유형의 요소가 마지막으로 나오는 요소.
:first-letter <p>나 <div>태그 같은 블록 태그의 첫 글자에 적용
:first-line <p>나 <div>태그 같은 블록 태그의 첫 라인에 적용
:only-child 자식요소가 유일하고 다른 유형의 요소도 없다면 적용.
Ex.) p:only-child:{ }
<div>
  <p>a</p>
</div>
:only-of-type 다른 유형의 요소가 있어도 자식요소가 하나뿐이라면 적용.
Ex.) p:only-of-type { }
<div>
  <p>a</p>
</div>
<div>
  <p>b</p>
  <s>c</s>
</div>
:target 앵커 목적지에 스타일 적용
:not(x) x 가 아닌 요소라면…
:empty 요소에 내용이 없는 빈 요소라면…
:root 문서의 최상위 요소
:lang() 지정한 언어 코드를 갖는 요소


:nth-child(an+b) 와 :nth-last-child(an+b) 클래스

:nth-child(an+b) 는 n번째 자식요소에 스타일을 적용하고, :nth-last-child(an+b) 는 마지막 요소부터 시작합니다.

a 는 배수, n 은 n 번째 요소, b 는 시작위치이고, 0부터 시작합니다. 태그 유형에 관계없이 n번째인 요소와 유형이 일치하면 적용합니다.

/* (3n + 0) 라면...
   (3 * 0) + 0 = 0 번째 요소는 없음 
   (3 * 1) + 0 = 3 번째 요소에 적용
   (3 * 2) + 0 = 6 번째 요소에 적용
   (3 * 3) + 0 = 9 번째 요소에 적용하라.
   ...
   따라서 (3n + 0) 과 (3n) 은 결과가 같음.

   (2n + 4) 라면...
   (2 * 0) + 4 = 4 번째 요소
   (2 * 1) + 4 = 6 번째 요소
   (2 * 2) + 4 = 8 번째 요소.
   (2 * 3) + 4 = 10 번째 요소에 적용하라.
   ...
*/
:nth-child(an+b)
:nth-child(an)

/* 값이 3 이면 3 번째 요소에만 적용함. */
:nth-child(n)

/* :nth-child(2n) 과 동일하게 홀수로 적용 */
:nth-child(odd)
/* :nth-child(2n+1) 과 동일하게 짝수로 적용 */
:nth-child(even)

다음 예제는 짝수로 스타일을 적용합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}

/* div:nth-child(2n) 과 동일한 결과를 얻음. */
#use-nth div:nth-child(even) {
  background: #CCC;
}
</style>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

알 수 없는 브라우저
사파리
크롬
엣지
파이어폭스
익스플러어
기타

다음은 2의 배수로 설정했는데, 태그의 유형이 같은 4번째 요소에만 스타일이 적용되었습니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
#use-nth div:nth-child(2n) {
  background: #CCC;
}
</style>

<div id="use-nth">
  <!-- 1번째 요소 -->  
  <div>알 수 없는 브라우저</div>
  <!-- 2번째 요소 - 유형이 달라서 불일치 -->
  <aa>사파리</aa>
  <!-- 3번째 요소 -->
  <div>크롬</div>
  <!-- 4번째 요소 - div와 유형이 같아서 일치 -->
  <div>엣지</div>
  <!-- 5번째 요소 -->
  <div>파이어폭스</div>
  <!-- 6번째 요소 - 유형이 달라서 불일치 -->
  <bb>익스플러어</bb>
  <!-- 7번째 요소 -->
  <div>기타</div>
</div>


:nth-of-type(an+b) 와 :nth-last-of-type(an+b) 클래스

:nth-child(an+b) 와 기능이 비슷하지만 같은 유형의 요소만 개수를 세고, n번째인 요소를 찾습니다.

a 는 배수, n 은 n 번째 요소, b 는 시작위치이고, 0부터 시작합니다. 같은 유형이 n번째인 요소와 일치하면 적용합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
#use-nth  div:nth-of-type(2n) {
  background: #CCC;
}
</style>

<div id="use-nth">
  <!-- 1번째 요소 -->
  <div>알 수 없는 브라우저</div>
  <aa>사파리</aa>

  <!-- 2번째 요소 - 일치 -->
  <div>크롬</div>
  <!-- 3번째 요소 -->
  <div>엣지</div>

  <!-- 4번째 요소 - 일치 -->
  <div>파이어폭스</div>
  <bb>익스플러어</bb>
  <!-- 5번째 요소 -->
  <div>돌핀</div>

  <!-- 6번째 요소 - 일치 -->
  <div>기타</div>
</div>

알 수 없는 브라우저
사파리
크롬
엣지
파이어폭스
익스플러어
돌핀
기타


:first-child 와 :last-child 클래스

:first-child 는 유형에 관계없이 처음 요소가 찾는 요소라면 적용합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
#use-nth :first-child {
  background: #CCC;
}
#use-nth :last-child {
  background: yellow;
}
</style>

<div id="use-nth">
  <qq>알 수 없는 브라우저</qq>
  <div>사파리</div>
  <div>크롬</div>
  <aa>기타</aa>
</div>

알 수 없는 브라우저
사파리
크롬
기타


:first-of-type 과 :last-of-type 클래스

:first-child 와 비슷하지만 같은 유형의 요소가 처음으로 나오는 요소를 찾습니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
#use-nth aa:first-of-type {
  background: #CCC;
}
</style>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>

  <!-- aa 요소가 처음으로 나오므로 일치 -->
  <aa>크롬</aa>
  <aa>기타</aa>
</div>

알 수 없는 브라우저
사파리
크롬
기타


:first-letter 와 :first-line

:first-letter 는 선택한 블록 요소의 첫 글자만 스타일을 적용합니다.

<style>
#letter:first-letter {
  background-color: yellow;
}
</style>

<div id="letter">
  하보니 PHP
</div>

하보니 PHP

:first-line 은 첫 번째 라인만 스타일을 적용합니다.

<style>
ul:first-line{
  background: yellow;
}
</style>

<ul>
  <li>익스플로어</li>
  <li>사파리</li>
  <li>크롬</li>
  <li>기타</li>
</ul>

<style>
#line:first-line{
  background: yellow;
}
</style>

<p id="line">
  안녕<br/>
  하보니<br/>
  PHP
</p>

안녕
하보니
PHP


:not(s) 클래스

s 가 아닌 요소를 찾습니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
#use-nth :not(div) {
  background: #CCC;
}
</style>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>

  <!-- div 요소가 아니므로 일치 -->
  <aa>크롬</aa>
  <div>기타</div>
</div>

Tag:

0 Comments

0 댓글