css - 我如何选择 .class-a :nth-child only when it also has class . class-b

Question

我有一个图像网格。在这个网格中，我有专辑。相册显示为单个图像 (images-album-cover)，直到它们展开，之后整个相册显示在其余图像 (images-album-images) 中。

images-album-cover 和 images-album-image 都有 images-image-col 类。 images-image-col 也是其余非相册图像的类。

我在每个相册图像的底部添加了一个边框(带有 div，不是实际的边框)以指示哪些图像是相册的一部分。

我需要能够做一些事情:

选择网格左侧的每个 images-album-cover 或 images-album-image。

选择网格右侧的每个 images-album-cover 或 images-album-image。

选择每个 images-album-image，即相册中的最后一张图像。

到目前为止，当网格只有非相册图像时，我已经能够选择左图像和右图像，但是当我真正需要它时，我不知道如何处理相册。我不仅无法选择 nth-child 只有当它匹配某个类时，而且当网格中有任何相册时 nth-child 停止工作，因为它没有相册，即使我试图定位所有图像(图像-图像-col)

这是一个 fiddle它在没有相册的情况下(在大屏幕上)工作。

当我开始制作相册时，我什至无法只选择第一个图像-相册-封面，我尝试这样做:

&:nth-child(2n+1) {
  .images-album-cover {
    outline: 1px dashed mediumvioletred;
  }
}

这似乎并没有做任何事情

这是相册的 HTML

<div class="col-xs-6 col-sm-4 images-image-col images-album-cover open">
  <a class="thumbnail image images-image-thumbnail">
    <img>
    <div class="album-label">
      <figcaption>asdfasf <span>(5)</span></figcaption>
    </div>
  </a>
  <div class="images-album-cover-bar"></div>
</div>
<span id="gallery-detail-22">
  <div class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
  </div>
  <div class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
  </div>
  <div class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
  </div>
  <div class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
  </div>
  <div class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
  </div>
</span>

如果你们认为 JS 解决方案会更好，我愿意接受它，但无论如何我仍然想知道这是否可行。

Answer 1

试试这个:

:nth-child(2n+1).images-album-cover {
    outline: 1px dashed mediumvioletred;
}