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

CSS CSS Selectors Advanced Selectors :not() – The Negation Pseudo-Class

Lee Cockcroft
Lee Cockcroft
5,147 Points
Posted by Lee Cockcroft
Lee Cockcroft
5,147 Points

css first-child

Hi All,

Could someone clear this up please.

I understand first-child nth-child(5) etc, however this has confused me.

The code below shows 3 divs with the same class "col".

If I use .col:first-child { color:red }

This only applies to the first ".col" class, not the child of their div?

Again if i do

col-a:first-child

{ color:red;

}

This colors the full column red? not the first child which should be the h2?

Thanks

<!DOCTYPE html> <html> <head> <title>Selectors</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <nav> <a href="#col-a">Column A</a> <a href="#col-b">Column B</a> <a href="#col-c">Column C</a> </nav> <div class="row group"> <div id="col-a" class="col"> <h2>Column A</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum arcu nisl, at vestibulum purus cursus ultrices. Sed consectetur faucibus velit, quis ultrices nisi.</p> <p>Donec rutrum magna mi, vitae congue elit egestas quis. Praesent ultrices rhoncus venenatis. </p> </div> <div id="col-b" class="col"> <h2>Column B</h2> <p>nteger scelerisque nisl sit amet eleifend mollis. Fusce eu tristique massa, et vehicula risus. Fusce congue convallis enim eget dignissim. Quisque auctor erat et.</p> <p>Nulla faucibus, vel lacinia ex lacinia. Nunc ut odio mattis magna vulputate viverra et et ligula.</p> </div> <div id="col-c" class="col"> <form> <h2>Column C</h2>

                <label for="name">Name:</label> 
                <input type="text" id="name">

                <label for="email">Email:</label>
                <input type="email" id="email" placeholder="email@website.com">

                <input class="btn" type="submit" value="Sign up">
            </form>
        </div>
    </div>
</div>

</body> </html>

3 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

The first-child selector selects elements where the element it is attached to is a first child, not the first child of the element.

So .col:first-child selects .col elements that are the first child of their parent, not the first child of .col elements. Thinking that it modifies the first child of the element it attach to, rather than instances where the element itself is a a first child is a common misunderstanding.

The same general idea also applies to the nth-child selector.

I would recommend you take a look at the examples at the MDN pages for the first-child selector, and the nth-child selector if you still have trouble understanding how they work.

Karl Jones
Karl Jones
8,761 Points
Karl Jones
Karl Jones
8,761 Points

If you wanted to modify the first child nested inside the parent , consider the child selector, ">", we covered previously: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors example: #col-a > :first-child {} or .col-a > :first-child {} for all column headings.

Lee Cockcroft
Lee Cockcroft
5,147 Points
Lee Cockcroft
Lee Cockcroft
5,147 Points

ahhh that now makes sense!! thank you!!!!