如何跳过第n个子元素？

Question

I want to skip counting on an element in nth-child with :not attribute, but it does not work or it's not even possible to do. Is there any other way to do this?

Here is the code:

 .layout { float: left; width: 100px; height: 60px; border: 2px solid red; margin-right: 10px; margin-bottom: 10px; } .hidden { display: none; } .layout:not(.hidden):nth-child(2n+1) { clear: both; } 

 <div class="layout"></div> <div class="layout"></div> <div class="layout hidden"></div> <div class="layout"></div> <div class="layout"></div> <div class="layout"></div> <div class="layout"></div> <div class="layout"></div> 

Even though the element with class .hidden is not visible, it's still counted with nth-child

Answer 1

I don't think the :nth-child can be applied to the result of evaluation of :not . But I suggest you a walkaround to get the same effect:

1. Wrap the "layout" DIVs within a container DIV:

  <div id="container"> <div class="layout"></div> <div class="layout"></div> <div class="layout hidden"></div> <div class="layout"></div> </div> 

2. CSS:

 .layout { /*float: left;*/ display: inline-table; width: 100px; height: 60px; border: 2px solid red; margin-right: 10px; margin-bottom: 10px; } div#container { width: 232px; /* See the note below */ } div.layout:first-child { display: block; clear: both; } .hidden { display: none; } /* .layout:not(.hidden):nth-child(2n+1) { clear: both; } */ 

To calculate accurately the container's exact width, you should first strip off the newlines between the layout DIVs, because they add an arbitrary amount of space when being rendered.

Answer 2

HTML

<div class="content">
<div class="layout"></div>
<div class="layout"></div>
<div class="layout hidden"></div>
<div class="layout"></div>
<div class="layout"></div>
<div class="layout"></div>
<div class="layout"></div>
<div class="layout"></div>
</div>

CSS

.content{
  display: flex;
  flex-wrap: wrap;
  width: 224px
}
.layout {
  width: 100px;
  height: 60px;
  border: 2px solid red;
  margin-right: 10px;
  margin-bottom: 10px;
  flex: 1 0 30%;
}

.hidden {
  display:none;
}