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