CODEWITHSUNDEEP
htmlcss
Ennio
Ennio

Reputation: 1157

How to make nth-child work with nested tags?

I'm trying to get the nth-child css to work on a nested tags, but it seem to only work for the first tag and the second tag. Is it possible to make it work with multiple level of nested tags?

I'm trying to set the border on the blockquote to different color between even and odd tags, so that would make it easier for the user to visualize the content on the page.

.test:nth-child(odd) {
    font-size: 14px;
    border-left: 5px solid #347bb8;
}

.test:nth-child(even) {
    font-size: 14px;
    border-left: 5px solid #000;
}
<blockquote class="test">
  <blockquote class="test">
    <blockquote class="test">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet urna et velit rhoncus elementum. Curabitur lacinia semper aliquet. Integer magna nisi, faucibus commodo lacus sed, ullamcorper lobortis nunc. Morbi pharetra id turpis vitae consectetur. Nulla viverra felis erat, at fermentum lectus commodo sit amet. Etiam at vehicula ante. Pellentesque et hendrerit leo, vitae tincidunt leo. Proin at leo posuere, gravida purus non, euismod mauris. Curabitur porttitor sapien quis risus convallis, ultricies accumsan nulla suscipit. Cras ex ex, feugiat id nulla ut, lacinia elementum ligula. Ut eu augue porttitor, maximus dolor eu, euismod nisl. Mauris vehicula purus a vehicula dapibus. Donec in mauris sed tellus scelerisque fermentum et vitae massa. Fusce ultrices diam vestibulum nisi commodo, ultricies tristique risus consectetur.
    </blockquote>

    More text Here
  </blockquote>
  
  More text here 
 </blockquote>

Upvotes: 2

Views: 94

Answers (2)

Temani Afif
Temani Afif

Reputation: 272723

You may think differently and achieve this using other tricks. Here is an example considering some background where you only need to know the last element:

blockquote {
  font-size: 14px;
  margin-left: 30px;
  padding-left: 5px;
  margin-top:0;
  margin-right: 0;
  position:relative;
}
blockquote:after {
  content:"";
  position:absolute;
  top:100%;
  height:100vh;
  left:0;
  right:0;
  z-index:-1;
  background:#fff;
}

.last {
  background: #fff content-box;
}

.first {
  overflow:hidden;
  z-index:0;
  background: repeating-linear-gradient(to right, 
    #000, #000 5px, 
    transparent 5px, transparent 35px, 
    #347bb8 35px, #347bb8 40px, 
    transparent 40px, transparent 70px);
}
<blockquote class="first">
  <blockquote>
    <blockquote>
      <blockquote>

      <blockquote class="last">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet urna et velit rhoncus elementum. Curabitur lacinia semper aliquet. Integer magna nisi, faucibus commodo lacus sed, ullamcorper lobortis nunc. Morbi pharetra id turpis vitae consectetur.
        Nulla viverra felis erat, at fermentum lectus commodo sit amet. Etiam at vehicula ante. Pellentesque et hendrerit leo, vitae tincidunt leo. Proin at leo posuere, gravida purus non, euismod mauris. Curabitur porttitor sapien quis risus convallis,
      </blockquote>
      text1 Here Here Here Here
    </blockquote>
    text2 Here gravida purus non, euismod mauris. Curabitur porttitor sapien quis risus convallis,
    </blockquote>
    Here gravida purus non, euismod mauris. Curabitur porttitor sapien quis risus convallis,
  </blockquote>

  text3 here
</blockquote>

Upvotes: 0

Quentin
Quentin

Reputation: 943207

You can't. :nth-child means "The nth child of the parent" not "The nth generation of descendants".

CSS has no shortcuts for what you are looking for.

.test {
   /* Default (even generation)
}

:not(.test) > .test,
:not(.test) > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test > .test > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test > .test > .test > .test > .test > .test > .test {
   /* odd generation */
}

… and as many more levels as you need

Upvotes: 2

Related Questions