Selecting a nested element with :nth-child

Question

I\'m having problems targeting nested elements with the :nth-child() selector. How can I target the second and third .service?

相关标签:

Answer 1

Each .service is the only child of its parent .large-4.columns, all three of which are children of the same .services.row element. Your :nth-child() should therefore be on the .large-4.columns elements:

.services > .columns:nth-child(n+2) > .service

Or you can use a sibling selector instead of :nth-child() if you will only have three of these columns at most:

.services > .columns ~ .columns > .service

Answer 2

If you want to target anything other than the first element, use :not, like so:

div {
  display: inline-block;
  background: black;
  color: white;
  height: 100px;
  width: 100px;
  float: left;
  text-align:center;
  line-height:100px;
}
div:not(:first-child) {
  border-left: 2px solid red;
}

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</section>