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 trialSilvia 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>
7 Answers
Steven Parker
231,198 PointsThe "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
Front End Web Development Techdegree Graduate 18,318 PointsThank you for looking into this! it does work :)!
ALMEKDAD ALMUHAMMAD
Courses Plus Student 10,947 PointsHi 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
231,198 PointsThat would work for the first item but not the entire first list.
Daniel Brown
16,908 PointsYou 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.
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 PointsThank you Trevor! I have tried on jsbin.com but seems not to be working, any ideas?
Trevor Tinotenda Manhuwa
Front End Web Development Techdegree Student 2,512 Pointsul:first-child { // Your Css Declerations here } ul:last-child{ // Your Css Declerations here }
sorry i had made atypo
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
Front End Web Development Techdegree Student 2,512 PointsExample below''
ul:nth-child(1) { // Your Css Declerations here color:red; }
kindly up vote my replies
;)
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 PointsI 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
Front End Web Development Techdegree Student 2,512 Pointsfix the code to be like this
ul:nth-child (1) { color:green; }
Anil Basaran
Front End Web Development Techdegree Student 3,167 PointsMay 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.
Trevor Tinotenda Manhuwa
Front End Web Development Techdegree Student 2,512 PointsTrevor Tinotenda Manhuwa
Front End Web Development Techdegree Student 2,512 PointsHi 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 }