CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes :first-child and :last-child

Silvia Ramos
seal-mask
.a{fill-rule:evenodd;}techdegree
Silvia Ramos
Front End Web Development Techdegree Student 10,979 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
Trevor Tinotenda Manhuwa
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
201,976 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.

ALMEKDAD ALMUHAMMAD
PLUS
ALMEKDAD ALMUHAMMAD
Courses Plus Student 2,123 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
201,976 Points

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

Daniel Brown
Daniel Brown
16,381 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

Trevor Tinotenda Manhuwa
Trevor Tinotenda Manhuwa
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
Silvia Ramos
Front End Web Development Techdegree Student 10,979 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
Trevor Tinotenda Manhuwa
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
Silvia Ramos
Front End Web Development Techdegree Student 10,979 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
Trevor Tinotenda Manhuwa
2,512 Points

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.