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

Posted by Silvia Ramos
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points

: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>
Trevor Tinotenda Manhuwa
.a{fill-rule:evenodd;}techdegree
Trevor Tinotenda Manhuwa
Front End Web Development Techdegree Student 2,512 Points

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,275 Points
Steven Parker
Steven Parker
231,275 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.

Silvia Ramos
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points

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

ALMEKDAD ALMUHAMMAD
PLUS
ALMEKDAD ALMUHAMMAD
Courses Plus Student 10,947 Points
ALMEKDAD ALMUHAMMAD
ALMEKDAD ALMUHAMMAD
Courses Plus Student 10,947 Points

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,275 Points
Steven Parker
Steven Parker
231,275 Points

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

Daniel Brown
Daniel Brown
16,908 Points
Daniel Brown
Daniel Brown
16,908 Points

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

Silvia Ramos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points
Silvia Ramos
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points

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

Trevor Tinotenda Manhuwa
.a{fill-rule:evenodd;}techdegree
Trevor Tinotenda Manhuwa
Front End Web Development Techdegree Student 2,512 Points

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

sorry i had made atypo

Silvia Ramos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points
Silvia Ramos
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points

:))) 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.

Trevor Tinotenda Manhuwa
.a{fill-rule:evenodd;}techdegree
Trevor Tinotenda Manhuwa
Front End Web Development Techdegree Student 2,512 Points

Example below''

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

kindly up vote my replies

;)

Silvia Ramos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points
Silvia Ramos
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points

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.

Trevor Tinotenda Manhuwa
.a{fill-rule:evenodd;}techdegree
Trevor Tinotenda Manhuwa
Front End Web Development Techdegree Student 2,512 Points

fix the code to be like this

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

Anil Basaran
seal-mask
.a{fill-rule:evenodd;}techdegree
Anil Basaran
Front End Web Development Techdegree Student 3,167 Points
Anil Basaran
.a{fill-rule:evenodd;}techdegree
Anil Basaran
Front End Web Development Techdegree Student 3,167 Points

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.