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?

.service:nth-child(2) { /* styles */ }
.service:nth-child(3) { /* styles */ }

<div class="banner row">
    <div class="large-12 columns">
        <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa.</p>
        <p>Boudin aliqua adipisicing rump corned beef. Nulla corned beef sunt ball tip, qui bresaola enim jowl. Capicola short ribs minim salami nulla nostrud pastrami.</p>
    </div>
</div>

<div class="services row">
    <div class="large-4 columns">
        <div class="service">
            <h2>Service Name</h2>
            <div class="divide"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <div class="large-4 columns">
        <div class="service">
            <h2>Service Name</h2>
            <div class="divide"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <div class="large-4 columns">
        <div class="service">
            <h2>Service Name</h2>
            <div class="divide"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

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>