сбросить CSS: счетчик nth-of-type

Question

Я использую плагин событий WP, который создает список событий в следующем формате: -

.event-list .event {
    float: left;
    width: 30%;
    margin-left: 0;
    background: #eee;
}

span.month {
  width: 100%;
  border-bottom: solid 1px black;
  display: block;
  clear: both;
}

.event-list div.event:nth-of-type(3n){
margin-left:5%;
}

.event-list div.event:nth-of-type(3n+1){
margin-left: 0;
clear: both;
}

.event-list div.event:nth-of-type(3n+2){
margin-left:5%;
}

<div class="event-list">
<span class="month">January</span>
<div class="event">Event 1</div>
<div class="event">Event 2</div>
<div class="event">Event 3</div>
<div class="event">Event 4</div>
<span class="month">February</span>
<div class="event">Event 5</div>
<div class="event">Event 6</div>
<div class="event">Event 7</div>
<div class="event">Event 8</div>
<div class="event">Event 9</div>
<div class="event">Event 10</div>
</div>

Я бы хотел, чтобы счетчик n-го типа сбрасывался после каждого элемента span, чтобы столбцы работали независимо от количества событий в этом месяце.Я попытался использовать селектор тильды ~ (как было предложено здесь Исключая элемент из шаблона nth-child http://jsfiddle.net/jWxb6/11/), но я не могу заставить его работать.нравится делать это без использования JS / JQuery, если я могу, но это вариант, если нет чистого решения CSS.

Answer 1

Почему бы не подумать о чем-то более простом для достижения этой цели.Вот и идея использовать flexbox и без необходимости использовать сложные селекторы, так как то, что вы хотите сделать, не будет возможно с вашей реальной структурой HTML.

.event-list {
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.event-list .event {
  width: 30%;
  margin-left: 0;
  background: #eee;
}

span.month {
  width: 100%;
  border-bottom: solid 1px black;
}

<div class="event-list">
  <span class="month">January</span>
  <div class="event">Event 1</div>
  <div class="event">Event 2</div>
  <div class="event">Event 3</div>
  <div class="event">Event 4</div>
  <span class="month">February</span>
  <div class="event">Event 5</div>
  <div class="event">Event 6</div>
  <div class="event">Event 7</div>
  <div class="event">Event 8</div>
  <div class="event">Event 9</div>
  <div class="event">Event 10</div>
</div>

Answer 2

Вам просто нужно обернуть события каждого месяца в новый div, чтобы счетчик обнулялся до 1 внутри родительского элемента.

.event-list .event {
    float: left;
    width: 30%;
    margin-left: 0;
    background: #eee;
}

span.month {
  width: 100%;
  border-bottom: solid 1px black;
  display: block;
  clear: both;
}

.event-list .month_wrapper div.event:nth-of-type(3n){
margin-left:5%;
}

.event-list .month_wrapper div.event:nth-of-type(3n+1){
margin-left: 0;
clear: both;
}

.event-list .month_wrapper div.event:nth-of-type(3n+2){
margin-left:5%;
}

<div class="event-list">
<div class="month_wrapper">
<span class="month">January</span>
<div class="event">Event 1</div>
<div class="event">Event 2</div>
<div class="event">Event 3</div>
<div class="event">Event 4</div>
</div>
<div class="month_wrapper">
<span class="month">February</span>
<div class="event">Event 5</div>
<div class="event">Event 6</div>
<div class="event">Event 7</div>
<div class="event">Event 8</div>
<div class="event">Event 9</div>
<div class="event">Event 10</div>
</div>
</div>