多个：nth-​​child语句

Question

I have a grid of posts, and I am trying to give each title between h2 tags a different color (green, red, blue - over and over again that pattern).

the html (simplified)is like this:

<div class="fusion-posts-container">
       <div>
        <div>                       
             <div>
               <ul>
                 <li>
                   <div>
                     <img>
                       <div>
                          <div>
                            <a></a>
                            <div></div>
                            <a></a>
                            <h4><a></a></h4>
                            <div>
                               <a></a>
                            </div>
                          </div>
                        </div>
                     </div>
                    </li>
                </ul>
           </div>
        <div class="fusion-post-content-wrapper">
          <div class="fusion-post-content post-content">
             <h2 class="entry-title"><a>THIS TITLE</a></h2>

I have tried several approaches and the closest I have gotten to targeting that anchor and change its color is with this:

.fusion-posts-container div:nth-child(3n+3) a{
color: #b7e352 !important;/*red*/
}

.fusion-posts-container div:nth-child(3n+1) a{
color: #fb5322 !important;/*green*/
}
.fusion-posts-container div:nth-child(3n+2) a{
color: #1592b0 !important;/*blue*/

}

But the only one that works is the red one, if I use them all at the same time it applies the last color to all the titles.

I tried this CSS: Can't get multiple :nth-child selectors to work but didn't work, anyone can point me to the right direction?

Answer 1

try using (-n+1)

.fusion-posts-container div:nth-child(-n + 1) a{color: #b7e352 !important;/*red*/}

.fusion-posts-container div:nth-child(-n + 2) a{color: #fb5322 !important;/*green*/}

.fusion-posts-container div:nth-child(-n + 3) a{color: #1592b0 !important;/*blue*/}

Answer 2

Assuming this would be your continuation of HTML (which your question doesn't have) then you can achieve this with nth-of-type instead of nth-child

Pay attention that instead of nth-of-type(3n+1) , for reaching items 1,4,7 and so on, due to your code having a sibling as first div with content you can't use the 1st item, so the counting changes then you should count 3n+4 , meaning, it will count from 4 to 7 to 10, and so on.

 .fusion-posts-container div:nth-of-type(3n+4) a { color: blue } .fusion-posts-container div:nth-of-type(3n+3) a { color: red } .fusion-posts-container div:nth-of-type(3n+2) a { color: green } 

 <div class="fusion-posts-container"> <div> <div> <div> <ul> <li> <div> <img> <div> <div> <a></a> <div></div> <a></a> <h4><a></a></h4> <div> <a></a> </div> </div> </div> </div> </li> </ul> </div> <div class="fusion-post-content-wrapper"> <div class="fusion-post-content post-content"> <h2 class="entry-title"><a>THIS TITLE</a></h2> </div> </div> <div class="fusion-post-content-wrapper"> <div class="fusion-post-content post-content"> <h2 class="entry-title"><a>THIS TITLE</a></h2> </div> </div> <div class="fusion-post-content-wrapper"> <div class="fusion-post-content post-content"> <h2 class="entry-title"><a>THIS TITLE</a></h2> </div> </div> <div class="fusion-post-content-wrapper"> <div class="fusion-post-content post-content"> <h2 class="entry-title"><a>THIS TITLE</a></h2> </div> </div> <div class="fusion-post-content-wrapper"> <div class="fusion-post-content post-content"> <h2 class="entry-title"><a>THIS TITLE</a></h2> </div> </div> <div class="fusion-post-content-wrapper"> <div class="fusion-post-content post-content"> <h2 class="entry-title"><a>THIS TITLE</a></h2> </div> </div> </div> </div> </div>