보다 크거나 작은 CSS n 번째 하위

보다 크거나 작은 CSS n 번째 하위

---

내 HTML에는

<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
..................
..................

위의 HTML에는 container클래스가 있습니다. 내 CSS에서 몇 가지 스타일을 .container:nth-child(3,4,5,6,..and so on). nth-child1 번과 2 번 외에 모두 적용해야한다는 뜻 입니다.

---

:nth-child()클래스에서 작동하지 않고 요소 자체를 찾습니다. .container래퍼로 div 를 래핑 하고 다음을 사용해야합니다.

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}

<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

작동 데모 .

명확하게 :nth-child()

사용 .container:nth-child(n+3)이 작동하거나 작동하지 않을 수 있습니다. 이 때문에, :nth-child()의사 나타내는 클래스 nth(선택자와 일치하는 하위 요소 .container이 경우에는).

는 IF .container요소가 아닌 n 번째 자녀 의의 부모 , 그것은 선택되지 않습니다.

로부터 사양 :

:nth-child(an+b)가상 클래스 표기법 갖는 소자 나타낸다 an+b-1 형제를 임의의 양의 정수 또는 제로 값, 문서 트리에서 전을 n, 그리고 부모 요소를 갖는다.

이 예를 고려하십시오.

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

이 경우 콘텐츠 가 .container:nth-child(2)있는 두 번째 div.container요소를 선택하지 않습니다 5th. 그 요소는 부모의 자식 트리에서 부모의 두 번째 자식 이 아니기 때문 입니다.

또한, .container:nth-child(n+3)모든 선택합니다 div.container때문에 요소 n에서 시작 0최초의 최초의 부모의 아이 트리의 요소와 대한이 div.container는 IS 넷째 아이 부모의.

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

따라서 선택자와 일치하는 div.container:nth-child(n+3)모든 3rd , 4th , 5th , ... 자식 요소를 나타냅니다 div.container.

온라인 데모 .

---

css :

.wrapper div:nth-child(n+3) {    /* you style*/   }

이유 및 설명

 (0+3) = 3 = 3rd Element
 (1+3) = 4 = 4th Element
 (2+3) = 5 = 5th Element  and so on ... where n=0,1,2,3.....

라이브 예 >>

---

다음 코드를 시도 .container하면 1과 2를 제외한 모든 클래스에 스타일이 적용됩니다 .

.container+.container~.container{
   /*styles*/
}

데모 바이올린

---

1과 2 만있는 경우 스타일을 적용하지 않으려면 대신 다음과 같이 할 수 있습니다.

.container {
    background: yellow;
}

.container:first-child,
.container:first-child + .container {
    background: transparent;
}

노란색 배경은 첫 번째 아이와 그 다음 아이를 제외한 모든 용기에 적용됩니다.

---

동적 솔루션 이후의 경우 (열 너비 등을 하드 코딩하지 않으려는 경우) 이 우수한 답변을 기반으로 자바 스크립트 솔루션을 게시했습니다 .

작업 예

용법:

// After including tableColumnFreeze.js
var freezer = document.getElementById('freezer');
new TableColumnFreeze(freezer);

마크 업 :

<div id="freezer">
  <table>
    <thead>
      <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
    </thead>
    <tbody>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
     </tbody>
  </table>
</div>

ReferenceURL : https://stackoverflow.com/questions/22035799/css-nth-child-for-greater-than-and-less-than