코딩웍스 인강 : 가상클래스 만들기 nth-child, nth-of-type

 

순서를 만드는 CSS 클래스

(nth-child, nth-of-type)

 

순서가 필요할때 클래스 이름을 정하지않고 순서를 정해서 적용

 

<div class="box">

       <div></div>

       <div></div>

       <div></div>

       <div></div>

</div>

 

.box div:first-child {

      backgroud-color: 000;

}

.box div:last-child {

      backgroud-color: 000;

}

.box div:nth-child(2) {

      backgroud-color: 000;

}

 

 

순서 만드는 클래스 실습

 

 

div 속성 display : inline-block; 주고나서 중앙정렬은 부모요소 위로 가서 text-align:center; 적용

 

nth-child() 는 순서에 적용됨

 

<div class="box">

      <h1>추가된 태그순서</h1>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

</div>

태그 뒤에 다른 태그<h1>가 들어가면 nth-child() 숫자도 자동으로 밀려나서 적용됨

 

 

 

nth-of-type

type은 다른 태그가 들어와도 순서가 밀리지않음

태그의 타입에 따라 적용됨

 

css에 적용될때

.box div:nth-of-type(n) {}

 

다른태그가 들어와도 순서에 영향이 없음