Welcome to WebmasterWorld Guest from 3.227.233.78

Forum Moderators: not2easy

Message Too Old, No Replies

How to manage last child within UL

     
1:30 pm on Oct 17, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1108
votes: 1


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;
}
2:05 pm on Oct 26, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1108
votes: 1


I have tested again birdbrain's code. It is a good example. If I add DIV element around this code it will not be detected Last child. Any clue?

<!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;
}
.mycontainer aside :first-child {
color: orange;
}
.mycontainer aside.tags ul li a {
font-size: 0.75em;
font-style: italic;
border-bottom: 1px solid #666;
}
.mycontainer aside.tags ul li a:last-child {
border-bottom: 0;
}
</style>

</head>

<body>
<div class="mycontainer">

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

</div>

</body>

</html>

When I validate it is interesting. The first and second LI is not detected. Do you see the same result as DIV element breaks all code.
2:57 pm on Oct 26, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4520
votes: 350


To be seen as you would expect a link to be seen, it needs to be written as a link is intended to be written. The anchor text for the link needs to precede the closing "</a>" tag. Your anchor text follows the closing tag for the anchor:
<a href="https://www"></a>Link3</li>

Put the "Link3" anchor text before the </a> and you may find different results.
<a href="https://www">Link3</a></li>


3:19 pm on Oct 26, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2713
votes: 822


You are also calling a .tags which doesn't exist in your code.

You haven't corrected the point of contention,
li a:last-child 

this should be:
li:last-child a


Finally you do not need to add ".mycontainer" to the tag declaration in your CSS.

Your CSS for ul li should be:

aside ul li a {
font-size: 0.75em;
font-style: italic;
}
aside ul li:last-child a {
text-decoration:none;
}
5:21 pm on Oct 26, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15889
votes: 876


text-decoration:none;
I think we did finally see a CSS that specified a border-bottom, so that has to be dealt with too.

OP, it's important to understand that underline and border-bottom are two different things and they are not mutually exclusive. If your CSS says
a {border-bottom: 1px solid;}
and you haven't said anything to remove the default underline, your links will show up with two lines under them. (With sufficiently fine calipers, or sufficiently youthful eyesight, you could probably distinguish between "underline + border-bottom" and "double underline", but I didn't try it.)

Further: was there anything in the CSS about color of links? Those, too, go by browser default, with different colors for link, visited and active. If you haven't said anything to the contrary, links will still be blue or purple, even if they're not underlined.
7:38 pm on Oct 26, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2713
votes: 822


@lucy24
I think we did finally see a CSS that specified a border-bottom, so that has to be dealt with too.

It has been dealt with, it was deleted, It made no sense to remove the text-decoration to simply replace it with border-bottom. This is all based on birdbrain's post and it is still unclear whether the result it produced is was the OP @Toplisek intended.
7:42 pm on Oct 26, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:May 1, 2018
posts: 103
votes: 17


.mystyle ul li:last-child a {
border-bottom: 0 none;
}
8:35 pm on Nov 2, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1108
votes: 1


Yes, sure. this is perfect. Thank you for all the help. Although it seems too complex code due to expected result it is very useful and managed. Simple code is not always the best solution.
12:32 pm on Nov 3, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15889
votes: 876


Although it seems too complex code
Is that a reference to the code posted by Steven29? If so, it could hardly be less complex.
1:23 pm on Nov 3, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2713
votes: 822


@at lucy24 its a reference to my comment on page one of the thread where I said:
But I can't wrap my head around why the code needs to be this complex.


@toplisek
Simple code is not always the best solution.

There may be exceptional situations where this may be the case, but that statement is rarely true. The problem with overly complex code is that in 6 month or a year you will need to change something on the page that is effected by this code and it will messing things up and then you will have no idea why or where the problem is coming from. Finding simple solutions wherever possible is always preferred. But this is your code and your project, your are free to do as you please. Good luck.
This 39 message thread spans 2 pages: 39