如何在具有不同父元素的特定（.selected）元素之後選擇一系列元素？

Question

如您所見，有元素的父元素爲.row。

我有一個.row元件內部的選擇元件，我想定位：

即下面的父的父元素的子元素含有.selected的元件

這隻可能在CSS中？

假設我要選擇父的第二.cell含.selected

如何打開包含13號綠色div的背景色父旁邊？

.row .cell.selected { 
 
    background-color: red 
 
} 
 
.row .cell.selected+.cell+.cell { 
 
    background-color: red; 
 
} 
 
.row .cell.selected+.cell+.cell+.cell { 
 
    background-color: red; 
 
} 
 
.row .cell.selected+.cell+.cell+.cell+.cell+.cell { 
 
    background-color: red; 
 
} 
 
#month-view .row .cell.selected+.cell { 
 
    background-color: yellow; 
 
} 
 
.row { 
 
    padding: 50px; 
 
}

<div id="month-view"> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     <div class="day"> <span>5</span></div> 
 
    </div> 
 
    <div class="cell selected"> 
 
     <div class="day"><span>6</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>7</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>8</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>9</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>10</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>11</span></div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell "> 
 
     <div class="day"><span>12</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>13</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>14</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>15</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>16</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>17</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>18</span></div> 
 
    </div> 
 
    </div> 
 
/div>

Answer 1

如果我明白你的問題，你想要的，第一行中得到一個「.selected」類中的細胞得到了造型的細胞在第二排在相同的位置。

這不可能用CSS，只使用JS。 CSS不能給你「.selected」單元格的索引位置。

如果你想要一個純HTML和CSS的解決方案，我建議你在這之後添加第二個類，如「.selected-column」到下一行和樣式。

Answer 2

在CSS中不可能，因爲您無法在CSS中向後/向上移動DOM。但是，如果你可以使用JS或jQuery，這是一種方法。 jQuery使用$.parent()，$.next()和:nth-child這非常簡單直觀。

$('.selected').parent('.row').next('.row').find('.cell:nth-child(2)').addClass('green');

.row .cell.selected { 
 
    background-color: red 
 
} 
 

 
.row { 
 
    padding: 50px; 
 
} 
 

 
.green { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="month-view"> 
 

 
    <div class="row"> 
 
    <div class="cell"> 
 
     <div class="day"> <span>5</span></div> 
 
    </div> 
 
    <div class="cell selected"> 
 
     <div class="day"><span>6</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>7</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>8</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>9</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>10</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>11</span></div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell "> 
 
     <div class="day"><span>12</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>13</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>14</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>15</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>16</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>17</span></div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="day"><span>18</span></div> 
 
    </div> 
 
    </div> 
 

 
</div>