CSS nth-child больше и меньше, чем

Ответ 1

:nth-child() не работает в классах, он ищет сам элемент. Вам нужно будет обернуть div .container оболочкой и использовать следующее:

.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() pseudo-class представляет дочерний элемент nth, соответствующий селектору (.container в этом случае).

Если элемент .container не является nth-child своего родителя, он не будет выбран.

Из Spec:

Обозначение псевдокласса :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 контент). Поскольку этот элемент не является дочерним элементом 2nd родительского родительского дерева.

Кроме того, .container:nth-child(n+3) выберет все элементы div.container, потому что n начинается с 0 для первого элемента в родительском древовидном дереве, а первый div.container является 4-й дочерний своего родителя.

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.

Онлайн-демонстрация.

Ответ 2

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.....

Живой пример " >

Ответ 3

Если это всего лишь 1 и 2, вы не хотите, чтобы применяемый вами стиль мог сделать что-то вроде этого:

.container {
    background: yellow;
}

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

Желтый фон будет применяться к каждому контейнеру, кроме первого и следующего за ним.

Ответ 4

Попробуйте использовать следующий код. Он будет применять стили для всех классов .container, кроме 1 и 2:

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

Демо-скрипт

Ответ 5

Для тех, кто после динамического решения (если вы не хотите жестко кодировать ширину столбца и т.д.), я опубликовал javascript solution, на основе этого отличного ответа.

Рабочий пример

Применение:

// 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>