How to manage last child within UL

[toplisek]

I have tried to manage the last child without a border. How to do this as the code will not work.
It is actually a link: a
.mystyle ul li a:last-child {
border-bottom: 0 none;
}

It will not work also:
.mystyle ul li:last-child {
border-bottom: 0 none;
}

[justpassing]

do you have a whole example ?

[NickMNS]

What does the html look like.

Also please use the code tags when you post code it makes it much easier to read. Code tags are square brackets with the word "code" in between, place before the actual code. And then [/...] where ... is replaced by "code" after the end of the actual code.

.mystyle ul li a:last-child { 
border-bottom: 0 none; 
} 

.mystyle ul li:last-child { 
border-bottom: 0 none; 
}

You can also click the preview button before you start typing and then all the mark-up options will appear.

[NickMNS]

If you are setting border-bottom to 0 then this presupposes that another element has the border styling apply to it. Which one?

[birdbrain]

Hi there toplisek,

if you do not supply sufficient code for members to replicate your
problem, how on earth can you expect members to resolve it? :(

Come on, concentrate, help us to help you. :)

birdbrain

[not2easy]

Is the <ul> contained within a <div> that has a bottom border? It is possible that the border is not related to the link or the menu list where it appears visually as NickMNS suggested.

[robzilla]

@birdbrain, I keep trying to find the source post of your "quotes", only to realize you're not quoting anyone (except yourself maybe). Have mercy.

.mystyle ul li a:last-child { 
border-bottom: 0 none; 
}

If you have <a> elements within a <li>, the above code would remove the bottom border from the last <a> in each <li>.

.mystyle ul li:last-child { 
border-bottom: 0 none; 
}

This would remove the bottom border from the last <li> in each <ul>.

(Note that "none" is pointless if you set border-bottom to 0. Might as well save those bytes.)

So it depends on what you're adding the border to in the first place. Is it the <a> or the <li>?

As noted, you'd have to post an HTML sample to get better answers.

[birdbrain]

Hi there robzilla,

"I keep trying to find the source post of your "quotes"...."

If you are referring to my previous post, then I would like
to point out that I did not use the BBCode for "quote".

In fact, I used the BBCode for "indent" which I find helps
to give the rather bland "Webmaster World.com" posts
a little bit of panache.

If I happen to use the BBCode for "quote" then I make
a point of styling it so that it's nature is fully revealed.

If this explanation does not allay your indignation, then I
would suggest that you take this complaint of yours to
the forum's administrators.

birdbrain

[lucy24]

In fact, I used the BBCode for "indent" which I find helps
to give the rather bland "Webmaster World.com" posts
a little bit of panache.

Where “panache” means “make them look identical in every way to [ quote ] markup”? File under: You Keep Using That Word.

---

Toplisek, the forms

.mystyle ul li a:last-child

and

.mystyle ul li:last-child

mean different things, and it's important to understand what each one means.

The first form means:
“an <a> element that is the last child of whatever element it happens to be the child of, if located within a list-item which in turn is located within an unordered list which in turn is located within anything of class "mystyle"”. For starters, note that "ul li" is always redundant, since a list is entirely composed of list-items. Unless you're trying to exclude stuff that happens in ordered lists (<ol>) just say "li"; if you do need to constrain it to unordered lists, then just say "ul".

The second form means:
“the last item in any unordered list that is located within anything of class "mystyle"”. (Did you forget an "a" at the end, meaning “a link that's inside this cascade of elements”?)

In both cases, the rule will apply separately to each list (or each unordered list) within elements of class "mystyle", no matter how many lists there happen to be.

It would help to explain in English what effect you're trying to achieve. (Hm. I think I say this more often about Apache questions.) Are you trying to make it so that links in the last item of an unordered list look different from links in other items in that list? Or does a single list-item contain multiple links, and you want the last of those links to look different from the other links within that same list-item?

[toplisek]

I'm very sorry for misunderstanding as I was away due to projects. In the future, I will post also HTML code and made mistake.

<style type="text/css">
.blog aside li a {
 font-size: 1.6rem;
 color: #000;
</style>
}

<aside class="blog">
<h3 >Top events</h3>
<div>
<div class="">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li><!-- Last item -->
</ul>
</div></div></aside>

You see an issue when you check the last item:

<li><a href=""></a></li><!-- Last item -->

When I try to eliminate border it will not be detected:

.mystyle ul li a:last-child {
border-bottom: 0 none;
} 

[robzilla]

It's still not really clear what you're trying to do, but your CSS selector there is looking for an <aside> element that is a child of the element with the .blog class, while in your HTML it's actually the <aside> element that is given that class. So just ".blog li a" should do the trick. But perhaps that's just an error of typing up sample HTML just now, as you also have the } outside of the closing </style>.

.mystyle ul li a:last-child {
border-bottom: 0 none;
} 

This will affect the last <a> of every <li>, not just the last <li>. If you want to target the last <li>, you'd use li:last-child.

Again, what you're trying to do depends on what element you're applying the border to in the first place; this isn't obvious from the code you posted.

[Selen]

Try this instead:

.mystyle ul li a:last-of-type {
border-bottom: 0 !important;
} 

[lucy24]

Reread my post, above, explaining the difference between
li a:last-child
and
li:last-child a

Does

<div class="">

mean
<div class = "mystyle">
? If not, none of the rules will apply.

What is

border-bottom: 0 none;

intended to mean? A border declaration consists of up to three pieces: width, style, color. If you mean “no border” it is generally sufficient to say “border-bottom: none” though sometimes you may need to say “border-bottom-style: none” and, if all else fails, replace “none” with “hidden”.

And, now wait a minute, where did you ever say that the <a> element has a bottom border in the first place? By default, any <a> has "text-decoration: underline" so to get rid of it you have to say "text-decoration: none". The attributes "border-bottom" and "underline" look very similar on screen--if you have both, you will see that the border-bottom is a couple of pixels further away from the text--but they are entirely different properties.

[birdbrain]

this is a quote from toplisek's post

"I will post also HTML code and made mistake."

this is not a quote by birdbrain

Unfortunately, you still have not supplied sufficient
code to replicate your problem. :(

The CSS that you have posted does not actually
indicate the initial setting of the border which you
are, unsuccessfully, trying to partially remove. ;)

birdbrain

[robzilla]

this is not a quote by birdbrain

Much obliged ;-)

[londrum]

If the number of those <li>s stays the same all the time, then you could always take the easy way out and target them like this

li a{blah}
li+li a{blah}

[NickMNS]

{border-bottom:0;}

@lucy24 border:0; give the same result as border:none;

[lucy24]

Where in the CSS do you set the border-bottom in the first place?

[birdbrain]

This is a quote from lucy24's post

"Where in the CSS do you set the border-bottom in the first place?"

This is just a repeat of requests that I made to toplisek days ago. :(

Did you, perchance, overlook them? ;)

To save you the time of trying to find them among the multitude of
guesses at a solution to this puny problem which have been posted,
I will simply remind you here below...

This is a quote from birdbrain's post - 2:06 pm on Oct 17, 2018 (utc 0)

"if you do not supply sufficient code for members to replicate your
problem, how on earth can you expect members to resolve it? :(

Come on, concentrate, help us to help you." :)

This is a quote from birdbrain's post - 6:13 pm on Oct 19, 2018 (utc 0)

"Unfortunately, you still have not supplied sufficient
code to replicate your problem. :(

The CSS that you have posted does not actually
indicate the initial setting of the border which you
are, unsuccessfully, trying to partially remove. " ;)

birdbrain

[lucy24]

I have a nasty suspicion that the <a> elements never had a border-bottom in the first place, so the reason the applicable CSS hasn't been posted is that it simply doesn't exist and there's nothing to post. Instead we're talking about getting rid of the underline that is present by default.

Which means, in turn, that this thread is about two entirely separate and unrelated questions: the border-bottom vs. underline question, and the last-child question.

[tangor]

I think birdbrain likes little boxes. :)

Like lucy24 there's not enough info on what the OP actually wants to accomplish.

[birdbrain]

This is a quote from tangor's post

"I think birdbrain likes little boxes." :)

Is that just an observation or do you have a
genuine objection to my method of posting?

This is a quote from tangor's post

"Like lucy24 there's not enough info on what the OP
actually wants to accomplish."

I think that you are confusing lucy24 with birdbrain. :(

It was I, who first pointed out the O.P.'s total lack of
information in reply #4 of this thread .

birdbrain

[lucy24]

Well, at this point OP has been asked the same question at least five times, variously on white and light-blue backgrounds, so eventually one of them should sink in.

[toplisek]

Thank you for all replies.

Please find the whole example:

<!DOCTYPE HTML>

<html>

<head>
<title>Last child testing</title>

<style type="text/css">
body {
 font-family: serif;
 max-width: 50em;
 padding: 1em 0 0 1em;
 line-height: 1.4;
}
aside :first-child {
 color: orange;
}
aside.tags ul li a {
font-size: 0.75em;
font-style: italic;
border-bottom: 1px solid #666;
}
aside.tags ul li a:last-child {
border-bottom: 0;
}
</style>

</head>

<body>
<aside class="tags">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<div class="sidebar">
<ul>
 <li><a href="https://www.xxx.html"></a>Link1</li>
 <li><a href="https://www"></a>Link2</li>
 <li><a href="https://www"></a>Link3</li>
</ul>
</div>

</aside>
</body>

</html>

Link3 is the last element and should be without the border. Link1 and Link2 should be with border. I post CSS and also HTML. It is just an example HTML and CSS that you see Link3 element. aside :first-child can be avoided.

[londrum]

I would guess that your border-bottom is disappearing as intended, but then it’s switching back to the normal link underline instead, which you haven’t removed
So just add

text-decoration:none

for all links

[robzilla]

You're unlikely to get the desired effect while you're placing the anchor text outside the <a> element. And as has previously been described, if you want to target the <a> of the last <li>, you need li:last-child, not a:last-child.

[birdbrain]

Hi there toplisek,

to be sure, to be sure, here is the code that needs to be applied...

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Last child testing</title>

<style>

body {
   font-family: serif;
   max-width: 50em;
   padding: 1em 0 0 1em;
   line-height: 1.4;
  }

aside p:first-child {
   color: orange;
}

aside.tags ul li a {
   font-size: 0.75em;
   font-style: italic;
   border-bottom: 1px solid #666;
   text-decoration: none;
 }
aside.tags ul li:last-child a {
   border-bottom: 0;
 }

</style>
</head>

<body>

  <aside class="tags">

   <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
     when an unknown printer took a galley of type and scrambled it to make a type 
     specimen book.
   </p><p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
     when an unknown printer took a galley of type and scrambled it to make a type 
     specimen book.
   </p>

   <div class="sidebar">
     <ul>
      <li><a href="https://www.xxx.html">Link1</a></li>
      <li><a href="https://www">Link2</a></li>
      <li><a href="https://www">Link3</a></li>
     </ul>
   </div>

  </aside>

</body>
</html>

birdbrain

[NickMNS]

birdbrain's post solves the problem. But I can't wrap my head around why the code needs to be this complex. I suspect that this is the implementation of a work around that does not address the real underlying issue. Is it possible that <a> tags are set to text-decoration:none; somewhere in the CSS and you are simply trying to add it back to all the links except the last one?

Based on the example posted the border-bottom serves to replace the text-decoration so replace text-decoration and hide when it is not needed. Like this:

aside ul li a {
 font-size: 0.75em;
 font-style: italic;
 text-decoration:underline; /*this adds the text-decoration back for the case where it was previously set none, if this isn't the case then this line is not needed.*/
 }

aside ul li:last-child a{
 text-decoration:none;
 }

[toplisek]

Thank you again for all help. This blog question is very popular. If you add blog elements and recent articles it is at the bottom an issue as there is another element. Border should vanish when you put another element like Best articles and I think it is not too complex as it is usual.

[NickMNS]

But we have shown is not specifically a border, but we show is an underline of a link. The typical UI format for links is that they are all underlined, this is what users expect. Showing the last link in a list of link as not underlined will make the user believe that it is not a link.

Here is a fiddle of birdbrain's code: [jsfiddle.net...]

Is that outcome you expected?