如何对类使用nth-of-type - 不是元素 [英] how to use nth-of-type for classes -- not elements

问题描述

我正在为图片库制作一个简单的HTML。图库的每一行可以有2,3或4张图片。 （在2图像行中，每个图像元素命名为 type-2 ，同样的 type-3 和 type-4 。）

现在我要选择每一行的最后一个元素来设置自定义边距。我的HTML如下：

 < div id =content> 
< div class =type-2>< / div> 
< div class =type-2>< / div> <！ - 我想要这个，类型2的2n + 0  - > 
< div class =type-3>< / div> 
< div class =type-3>< / div> 
< div class =type-3>< / div> <！ -  this，3n + 0 of type-3> 
< div class =type-4>< / div> 
< div class =type-4>< / div> 
< div class =type-4>< / div> 
< div class =type-4>< / div> <！ -  this，4n + 0 of type-4> 
< div class =type-2>< / div> 
< div class =type-2>< / div> <！ -  this  - > 
< div class =type-3>< / div> 
< div class =type-3>< / div> 
< div class =type-3>< / div> <！ -  this  - > 
< div class =type-4>< / div> 
< div class =type-4>< / div> 
< div class =type-4>< / div> 
< div class =type-4>< / div> <！ -  this  - > 
< / div> 
  

我认为下面的CSS可以工作，但是没有：

  .type-2：类型nth（2n + 0）{margin-right：0;} 
 .type-3：nth- （3n + 0）{margin-right：0;} 
 .type-4：nth-​​of-type（4n + 0）{margin-right：0;} 
  

这个CSS选择的是：

 < div id =content> 
< div class =type-2>< / div> 
< div class =type-2>< / div> <！ - 由type-2选择：nth-​​of-type（2n + 0） - > 
< div class =type-3>< / div> <！ - 由类型-3选择：nth-​​of-type（3n + 0） - > 
< div class =type-3>< / div> 
< div class =type-3>< / div> 
< div class =type-4>< / div> 
< div class =type-4>< / div> 
< div class =type-4>< / div> <！ - 由type-4选择：nth-​​of-type（4n + 0） - > 
< div class =type-4>< / div> 
< div class =type-2>< / div> <！ - 由type-2选择：nth-​​of-type（2n + 0） - > 
< div class =type-2>< / div> 
< div class =type-3>< / div> <！ - 由类型-3选择：nth-​​of-type（3n + 0） - > 
< div class =type-3>< / div> 
< div class =type-3>< / div> 
< div class =type-4>< / div> 
< div class =type-4>< / div> <！ - 由type-4选择：nth-​​of-type（4n + 0） - > 
< div class =type-4>< / div> 
< div class =type-4>< / div> 
< / div> 
  

我可以编辑我的HTML来实现我想要的，但只是出于好奇，的CSS？

编辑：此问题可能看起来像一个问题的重复，如果 nth- / code>和 nth-of-type 可以应用于类而不是元素。我已经知道答案是否定的。我真正要求的是一个纯CSS解决方案/ hack，它的选择的答案只是这样。

解决方案

只有CSS hack，没有修改你的标记，你可以做如下：

  [class * ='type-' ]，[type ^ ='type  - '] {/ *将所有div设置为float：left * / 
 float：left; 
 content：url（'http://static.adzerk.net/Advertisers/db5df4870e4e4b6cbf42727fd434701a.jpg'）; 
 height：100px; width：100px; 
} 
 
 .type-2 + .type-2 + div {
 clear：both; / *清除一个div的浮动，后面跟着类型为2的两个div * / 
} 
 
 .type-3 + .type-3 + .type-3 + div {
 clear：both; / *清除一个div的浮动，后面跟着类型为-3的三个div * / 
} 
 
 .type-4 + .type-4 + .type-4 + .type-4 + div {
 clear：both; / * / *清除类型为4的div后面的div * / 
} 
  


$ b b

演示小提琴

I am working on a simple HTML for an image gallery. Each row of the gallery can have 2, 3 or 4 images. (In an 2-image row, each image element is named type-2, the same goes to type-3 and type-4.)

Now I want to select the last element of each row to set a custom margin. My HTML is like this:

<div id="content">
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- I want this, 2n+0 of type-2 -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-3"></div> <!-- this, 3n+0 of type-3 -->
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- this, 4n+0 of type-4 -->
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- this -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-3"></div> <!-- this -->
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- this -->
</div>

I think the following CSS would work but it didn't:

.type-2:nth-of-type(2n+0) {margin-right:0;}
.type-3:nth-of-type(3n+0) {margin-right:0;}
.type-4:nth-of-type(4n+0) {margin-right:0;}

What this CSS selects is:

<div id="content">
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- selected by .type-2:nth-of-type(2n+0) -->
    <div class="type-3"></div> <!-- selected by .type-3:nth-of-type(3n+0) -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- selected by .type-4:nth-of-type(4n+0) -->
    <div class="type-4"></div>
    <div class="type-2"></div> <!-- selected by .type-2:nth-of-type(2n+0) -->
    <div class="type-2"></div>
    <div class="type-3"></div> <!-- selected by .type-3:nth-of-type(3n+0) -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- selected by .type-4:nth-of-type(4n+0) -->
    <div class="type-4"></div>
    <div class="type-4"></div>
</div>

I can edit my HTML to achieve what I want, but just out of curiosity, is there some kind of CSS for this?

Edit: this question may look like a duplicate of questions asking if nth-child and nth-of-type can be applied to classes -- not elements. I already knew the answer is no. What I'm really asking for is a pure CSS solution/hack for it, and the chosen answer did just that.

解决方案

With only CSS hacks, without modifying your markup, you can do something like the below:

[class*=' type-'], [type^='type-']{ /* Set all the divs to float: left initially */
    float: left;
    content: url('http://static.adzerk.net/Advertisers/db5df4870e4e4b6cbf42727fd434701a.jpg');
    height: 100px; width: 100px;
}

.type-2 + .type-2 + div{
    clear: both; /* Clear float for a div which follows two div with class type-2 */
}

.type-3 + .type-3 + .type-3 + div {
    clear: both; /* Clear float for a div which follows three div with class type-3 */
}

.type-4 + .type-4 + .type-4 + .type-4 + div {
    clear: both; /* /* Clear float for a div which follows four div with class type-4 */
}

Demo Fiddle

这篇关于如何对类使用nth-of-type - 不是元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！