Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


nth-child not working after first

Hey all, I have a small problem where I am trying to move a collection of images across a background (they are all the same image but I want to target them individually so I have pasted multiple links as can be seen below, if there's a better way around this feel free to explain) the problem is I can target the first img in CSS with either first-child or nth-child but the following children seem unmoved by the exact same CSS

The three img are all children of .background as far as I'm aware?

<div class="container clearfix">
        <div class="background">
            <img src=../GraphicArt/InkScape/g4109.png alt="1">
            <img src=../GraphicArt/InkScape/g4109.png alt="2">
            <img src=../GraphicArt/InkScape/g4109.png alt="3">
        <div class="head"></div>
        <div class="Rhead"></div>   

I can target the first child but the others are not even targeted

div.background img:nth-child(1) {

div.background img:nth-child(2) {

Here is the CSS for .background

.background {
    background: salmon url('../../GraphicArt/Inkscape/g4106.png' ) ;
    background-repeat: no-repeat;

Thanks in advance :)

2 Answers

Salmen Bejaoui
Salmen Bejaoui
8,017 Points

you have two semicolons after the curly brackets

Thank you very much Salmen, it's these painfully obvious mistakes that seem to be making the most trouble for me!