Css last child and before

:last-child

:last-child is a pseudo-class which selects the target element if it is the last child of some other element.

That is, :last-child will match the element only if it is the last child of its parent.

For example, suppose you have the following HTML:

 
 
Lorem Ipsum.
 
Another Lorem Ipsum.
 
 

The following will select and apply the styles to the second paragraph which, in this case, is the last child of its parent.

The above rule will not style the paragraph in the following example, because it is not the first child of its .container parent.

Trivia & Notes

If you want to select and style the last paragraph inside a container, whether or not it is the last child, you can use the :last-of-type selector, which, as the name suggests, will select the last element of its type, whether or not it is the last child of its parent. For example, p:last-of-type will select the paragraph that comes before the unordered list in the above source code example, but will not match any other paragraph that comes before that.

The :last-child pseudo-class, just like other pseudo-classes, can be chained with other selectors such as :hover , for example, to provide hover styles for selected element. It can also be chained with pseudo-elements ::before and ::after . See the examples and live demo sections below for examples.

Examples

Suppose you have the following markup:

The following rule will match the span inside the second paragraph, because it is the last child of its parent.

The following rule will match the last list item in the above unordered list.

The following rule will not match any of the above paragraphs, because none of them is the last child of its parent.

The following rule will wrap the span in two parenthesis using the ::before and ::after pseudo-elements.

span:last-child::before < content: "("; color: deepPink; >span:last-child::after

You can see the live demo in the next section.

Live Demo

Browser Support

The :last-child pseudo-class is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, and on Android and iOS.

Further Reading

Related Entries

Written by Sara Soueidan. Last updated February 3, 2015 at 12:33 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.

Build outstanding websites with Readymag. Advanced animations, 5000+ fonts, no layout limitations, no code needed. Try for free

Источник

ahmedmusawir / last-child.css

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

I have a list of elements :

One < / li >

Two < / li >

Three < / li >

Four < / li >

Five < / li >

< / ul >

And styled like this :

ul

list-style-type : none;

text-align : center;

>

li

display : inline;

>

li : not ( : last-child ) : after

content : ‘ |’ ;

>

If it ‘s a problem with the not selector, you can set all of them and override the last one

li : after

content : ‘ |’ ;

>

li : last-child : after

content : » ;

>

or if you can use before , no need for last-child

li + li : before

content : ‘| ‘ ;

>

Источник

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

Источник