Css selector last div

:last-child

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

Try it

Syntax

Examples

Basic example

HTML

div> p>This text isn't selected.p> p>This text is selected!p> div> div> p>This text isn't selected.p> h2>This text isn't selected: it's not a `p`.h2> div> 

CSS

p:last-child  color: lime; background-color: black; padding: 5px; > 

Result

Styling a list

HTML

ul> li>Item 1li> li>Item 2li> li> Item 3 ul> li>Item 3.1li> li>Item 3.2li> li>Item 3.3li> ul> li> ul> 

CSS

ul li  color: blue; > ul li:last-child  border: 1px solid red; color: red; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

:last-child

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

Try it

Syntax

Examples

Basic example

HTML

div> p>This text isn't selected.p> p>This text is selected!p> div> div> p>This text isn't selected.p> h2>This text isn't selected: it's not a `p`.h2> div> 

CSS

p:last-child  color: lime; background-color: black; padding: 5px; > 

Result

Styling a list

HTML

ul> li>Item 1li> li>Item 2li> li> Item 3 ul> li>Item 3.1li> li>Item 3.2li> li>Item 3.3li> ul> li> ul> 

CSS

ul li  color: blue; > ul li:last-child  border: 1px solid red; color: red; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to Select the Last Element of a Specific Type

It may seem a little bit confusing at first, but with the examples below you will understand it completely once and for all!

Let’s start with a simple example and extend it step by step to understand this concept well :

html> html> head> title>last-of-type pseudo class title> head> body> style> main :last-of-type < background-color: aqua; > style> main> div>I'm the first div inside the main! div> div>Hi, this is the second div here! div> p>I'm a p tag which is alone here! But hey, look at my color! p> div>I'm the last div here, look at my color! div> main> body> html>

In the code above, we have a main tag as our parent for div & p tags. We specified in the css that we want our last direct children of main tag (our parent in here) to have a background color of aqua ( main :last-of-type < background-color: aqua; >)

Note the space between main and :last-of-type.

So the last div and the only p inside the main tag will be aqua color.

html> html> head> title>last-of-type pseudo class title> head> body> style> main :last-of-type < background-color: aqua; > style> main class="example-wrapper"> div>I'm the first div inside the main tag! div> div>Hi, this is the second div here! div> p>I'm a p tag which is alone here! But hey, look at my color p> div>I'm the last div here, look at my color! div> main> body> html>

Now, let’s extend it a little bit by adding other tags in between our existing tags. Here we go:

style> main :last-of-type < background-color: aqua; > style> main> div> I'm the first div inside the main! span>I'm a span here span> And span>I'm the other span in here! span> div> div>Hi, this is the second div here! Now I have a span>span span> too. div> p>I'm a u>paragraph u> tag here! And I'm an em>em em> tag in p! p> p>Now I'm the last p! p> div>I'm the last div here, look at my color! But hey, I think I'm not the last now! There's a div next after me! div> div>Now I'm the last div! div> main>

So as you saw, we added some span, em, and p tags inside of direct children of the main tag.

Now, the tags inside of each direct child will be treated as a last type of element.

Meaning that for example in the first div , we added two span tags, and the last one will be selected as the last of type span in its direct parent which is the first div, and that div itself will be treated as a type of div related to its direct parent, which is the main tag.

Now you’ll have a good grasp of using the :last-of-type pseudo class.

Here’s the final result:

I’m a paragraph tag here! And I’m an em tag in p!

I’m the last div here, look at my color! But hey, I think I’m not the last now! There’s a div next after me!

Источник

:last-of-type

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

Try it

Syntax

Examples

Styling the last paragraph

HTML

h2>Headingh2> p>Paragraph 1p> p>Paragraph 2p> 

CSS

p:last-of-type  color: red; font-style: italic; > 

Result

Nested elements

This example shows how nested elements can also be targeted. Note that the universal selector ( * ) is implied when no simple selector is written.

HTML

article> div>This `div` is first.div> div>This span>nested `span` is lastspan>!div> div> This em>nested `em` is firstem>, but this em>nested `em` is lastem>! div> p>This `p` qualifies!p> div>This is the final `div`!div> article> 

CSS

article :last-of-type  background-color: pink; > 

Result

Multiple selectors elements

This HTML example contains nested elements of different types. The CSS contains both type selectors and class selectors.

HTML

p>This `p` is not selected.p> p>This `p` is not selected either.p> p> This `p` is last `p` element of its parent e.g. `body` selected by `p` type selector. p> div class="container"> div class="item">This `div` is not selected.div> div class="item">This `div` is not selected either.div> div class="item"> This `div` is last `div` element of its parent `div` selected by `.container .item` class selector. div> p class="item"> This `p` is last `p` element of its parent `div` selected by `.container .item` class selector. p> div> 

CSS

p:last-of-type  background: skyblue; > .container .item:last-of-type  color: red; font-weight: bold; > 

Result

The last and the last

are both red and bold as the .item:last-of-type selects the last of every type if that last element also has the item class.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник