CSS Test

Using the last-child selector

The :last-child pseudoclass still cannot be reliably used across browsers. In particular, Internet Explorer versions < 9, and Safari < 3.2 definitely don't support it, although Internet Explorer 7 and Safari 3.2 do support :first-child , curiously.

Your best bet is to explicitly add a last-child (or similar) class to that item, and apply li.last-child instead.

IE8 doesn’t support :last-child either. And it’s not that curious. :first-child is a CSS2 pseudo-class, :last-child a CSS3 pseudo-class.

last-child works in all the modern browsers, which means, of course, it does not work in any version of IE.

@mercator It’s curious that :first-child was implement in CSS2 but :last-child was left until CSS3 . seems pretty obvious to add them at the same time.

Another solution that might work for you is to reverse the relationship. So you would set the border for all list items. You would then use first-child to eliminate the border for the first item. The first-child is statically supported in all browsers (meaning it can’t be added dynamically through other code, but first-child is a CSS2 selector, whereas last-child was added in the CSS3 specification)

Note: This only works the way you intended if you only have 2 items in the list like your example. Any 3rd item and on will have borders applied to them.

+1 for out of the box thinking 🙂 I just converted my last-child elements to first-child and changed by border-right to border-left for menu separators. Now IE8 likes my css.

If you think you can use Javascript, then since jQuery support last-child , you can use jQuery’s css method and the good thing it will support almost all the browsers

Example Code:

You can find more info about here : http://api.jquery.com/css/#css2

Wayyy better to do something like $(«#nav li:last-child»).addClass(‘last-child’) so you can keep your styling in your stylesheets.

This is cleaner than the first solution since it is handled automatically. But I agree with jason, too.

Actually, IE7 doesn’t load a class that has both div:last-child and div.last-child . It appears that it considers the :last-child syntax to be invalid and any class with that pseudo-selector won’t be applied.

@Josh M.: That’s correct and expected behavior. Quite unfortunate, I should say. You’d have to duplicate the rule.

Your selector is wrong. li + #nav li selects li inside #nav that comes after li . Your selector should simply be #nav li + li + li .

If you find yourself frequently wanting CSS3 selectors, you can always use the selectivizr library on your site:

It’s a JS script that adds support for almost all of the CSS3 selectors to browsers that wouldn’t otherwise support them.

Throw it into your tag with an IE conditional:

last-child pseudo class does not work in IE

As an alternative to using a class you could use a detailed list, setting the child dt elements to have one style and the child dd elements to have another. Your example would become:

#refundReasonMenu #nav li:dd

Neither method is better than the other and it is just down to personal preference.

Another way to do it is using the last-child selector in jQuery and then use the .css() method. Be weary though because some people are still in the stone age using JavaScript disabled browsers.

Why not apply the border to the bottom of the UL?

element or margin-bottom on the last
• element, this will not have the desired placement of right underneath the last
• element. Otherwise, this is a good solution.

If you are floating the elements you can reverse the order

i.e. float: right; instead of float: left;

And then use this method to select the first-child of a class.

/* 1: Apply style to ALL instances */ #header .some-class < padding-right: 0; >/* 2: Remove style from ALL instances except FIRST instance */ #header .some-class~.some-class

This is actually applying the class to the LAST instance only because it’s now in reversed order.

Here is a working example for you:

.some-class < margin: 0; padding: 0 20px; list-style-type: square; >.lfloat < float: left; display: block; >.rfloat < float: right; display: block; >/* apply style to last instance only */ #header .some-class < border: 1px solid red; padding-right: 0; >#header .some-class~.some-class

  
List 1-1
  
List 1-2
  
List 1-3


  
List 2-1
  
List 2-2
  
List 2-3


  
List 3-1
  
List 3-2
  
List 3-3

Источник

Use css last-child change border

Is that possible to use CSS last-child to do this? Can I use the same class to add last-child and make the second border to smaller px? Or the only way to do so is by adding the different class name?

you can get this with last-child pseudo class. however, using pseudo elements like before and after would be better solution

@AryanTwanju yea, I think of doing it as well, but usually with no luck. I always cannot get any result using pseudo elements like before and after . Do you mind showing me some example in this case? Would like to learn more from it. Thanks!

3 Answers 3

You need to wrap border divs and after that, with the use of :last-child you can achieve this.

The reason behind using wrapper is :last-child will only try to match the very last child of a parent element

Sorry but this is not the explanation of why we should add a wrapper . your element already have a parent element which is the body but jSfiddle add other element that you don’t see and match the last-child ;). And you wrapper isn’t mandatory in all the cases

well fiddle or stack snippet here, it’s the same issue 😉 Try your code within a html file you created locally and remove the wrapper, it will work fine

Yeh, You can use the last-child . last-child selector need a parent div. Please check the code.

.border < border: 3px solid black; width: 80px; display: inline-block; >div.border:last-child

@TemaniAfif The last-child selector is used to select the last child element of a parent. So it does not work without a parent div.

@TemaniAfif if the elements are only in body tag, that will be work. But here some another elements are included(a script tag and another hidden div included), Please inspect the result box. I hope then you can understand.

I already know this and I answered a similar issue here stackoverflow.com/questions/48632929/… .. .but I asked you the question because your explanation was wrong and we never need a parent element for last-child to work

Okay. «The :last-child selector matches every element that is the last child of its parent.» is this the definition of :last-child selector?

What about an easier way with one element and without complex selector:

And here is how you can do it to make it like your image:

Once again thanks for the answer, I never thought of using linear-gradient . As you mention that «we never need a parent element for last-child to work» so my question is do you mind showing me how can I use last-child in my cases? Or it wasn’t proper to use last-child for this question? Would like to learn more from it. Thanks! 🙂

Источник

CSS last-child not overriding parent border

I can only assume it has something to do with the after element as the margin is actually being added in the right place, but I can’t figure it out. Thanks in advance.

I just did one fiddle . but I’m not so sure if every code is there, could you check that please jsfiddle.net/e2w6r8et

yes where is the border but if you want to remove last child border then use this ul li:last-child < border-right:none;>or read here w3schools.com/cssref/sel_last-child.asp

for more info, i just gave structure but if you will share working code then will give you final answer. thanx

3 Answers 3

I’ve used your HTML and wrote minimal CSS for you to understand

TIP : Give classes and id’s name which have semantic meaning to it. It is difficult to code when you give class names like these.

.gf-menu.l1 li < display: inline-block; padding: 0 10px 0 10px; border-right: 1px solid red; >.gf-menu.l1 li:last-child

Thanks, I removed display: inline-block; and got the exact same behaviour as before, but without the last right border. Note: the class names are generated by joomla, that’s why there so meaningless. Thanks again for helping.

Quick update for anyone that stumbles on this: The inline behaviour was defined in .gf-menu already. It’s the padding I changed, sorry about that.

Ok, and does .gf-menu.l1 > li > .item refer to the a element in this case? Is that the same as .gf-menu.l1 > li a.item in your example? Not really familiar with the format yet.

Here is a solution with a few advices:

.gf-menu.l1 < list-style: none; >.gf-menu.l1 > li < float: left; text-align: center; >.gf-menu.l1 > li a.item < /* Better to apply the style to the A instead of the LI, also to style the clickable area */ display: block; padding: 10px; text-decoration: none; background-color: rgba(0,0,0,0.1); >.gf-menu.l1 > li a.item:hover < background-color: rgba(0,0,0,0.2); >.gf-menu.l1 > li:not(:last-child) a.item

Here I used the selector :not instead of having an other line to define the last-child as border-right: 0;

Here :not specifies that the :last-child won’t be included for the following properties.

Thanks you for your answer, the border was fixed by Sidsec9’s reply but I’ll look at this for the hover behaviour!

Yep, his solution is completely correct. Just have a look in my answer about the :not and in the comment in code about the style on the A element. This is a good practice, you should keep that in mind in the future.

It looks like you’re not far off. If you’re trying to get them to display next to each other then you need to change your CSS to:

It might be helpful if you posted that in your question then. When people copy your code and run it, the fact that’s missing puts them in a regular UL. @Leothelion not sure what you’re referring to but given the code, this does exactly what the OP asked for, while you’re asking people to read before posting, perhaps you could run a spellcheck.

@DylanB, don’t take me comment in other way but still i think you did not read the question. So telling you. OP don’t want right border in last li of ul so please tell me where you write the code to remove the last li’s right border? now you got me?

Источник

: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 do I have a border-bottom on all except the last item

Without using JavaScript and not having to support IE7 and below (IE8 fails on the second one) there are three options you can use: :first-child , :lastchild and the + selector:

:first-child

:last-child

+ selector

The problems arise if you need to support IE8 and your design doesn’t allow you to put a border on the top of your elements as opposed to the bottom.

EDIT: The fix to your width issue is that you’re adding 180px to 2*18px of the a element, remove the left right padding, and set padding: 18px 0; and you’ll be golden. (updated jsfiddle: http://jsfiddle.net/NLLqB/1/)

awesome! I definitely don’t know what’s going on in the li+li portion. And i kinda lost you at the padding 18 part. i read it like 4 times and don’t get it. think you can expand on that one?

@JoSo — you’re being pedantic — css is aesthetic. There is nothing at all wrong with utilizing any of these options, and considering that the optimal one, :last-child isn’t supported in IE8 (along with :not) I feel that the first-child and the element selector win out for css solutions. If you only ever give the answer to the question and not the answer to the need, you’re not going to get very far in life.

Part two on padding: The default width of an element is width + padding + border (search for the box model if you want more details), so if you have width: 180px; and padding:18px; the overall width of your border will be 216px. Setting margin: 0 auto; and padding: 18px 0; allows your container to be 180px and sit in the middle of your UL.

Источник