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 Going Further with Attribute Selectors and Pseudo-Classes :first-child and :last-child

:first-child and :last-child selectors

Hello!

What if in our HTML we have to lists but want to get style on the first one? how the :first-child and :last-child would work? example:

<body>
        <h1> List one</h1>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>        
    </ul>
        <h1> List two</h1>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>        
    </ul>

Hi kindly find the syntax below for first child and last child for UL Elements

ul:first-child { // Your Css Declerations here }

ul:last-child{ // Your Css Declerations here }

7 Answers

Steven Parker
Steven Parker
231,269 Points

The "first-child" selector would not select the first list because it is the second child of the parent element (body) — the first child is the h1 heading.

BUT ... you could use "ul:first-of-type" instead.

Thank you for looking into this! it does work :)!

Hi Silvia Ramos, I think I understand what you meant Actually there are many solutions, one of them using our :first-child Pseudo Class this way

h1:first-child + ul li:first-child { color: firebrick; background: dodgerblue; }

This rule is going to work perfectly so please let me know if it doesn't. Hope it helps +_^

Steven Parker
Steven Parker
231,269 Points

That would work for the first item but not the entire first list.

You can use the nth-child CSS pseudo-class to achieve your desired style.

Example:

li:nth-child(<argument>) {}

There are some great tutorials on CSS selectors authored by Guil Hernandez.

https://teamtreehouse.com/library/nthchild

Thank you Trevor! I have tried on jsbin.com but seems not to be working, any ideas?

ul:first-child { // Your Css Declerations here } ul:last-child{ // Your Css Declerations here }

sorry i had made atypo

:))) thanks! it does target both lists though. I have probably explained myself incorrectly. I would like to know if there is anyway we can target the first LIST only by using these selectors.

Example below''

ul:nth-child(1) { // Your Css Declerations here color:red; }

kindly up vote my replies

;)

I can't see this working yet... nothing happens when I write the code above. If i use

li:nth-child {
color: green;
} 

it does work, but still style both lists, instead of the first one.

fix the code to be like this

ul:nth-child (1) { color:green; }

May be you can add a class attribute the first ul element like this and combine the first child

<ul class: first-list> than .first-list li:first-child {// CSS code here} This worked i checked but don't know if it's what you are asking :) Hope it helps.