How to manage last child within UL

Forum Moderators: not2easy

Message Too Old, No Replies

How to manage last child within UL

toplisek

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

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

toplisek

2:05 pm on Oct 26, 2018 (gmt 0)

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.

not2easy

2:57 pm on Oct 26, 2018 (gmt 0)

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>

NickMNS

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

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

lucy24

5:21 pm on Oct 26, 2018 (gmt 0)

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.

NickMNS

7:38 pm on Oct 26, 2018 (gmt 0)

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

Steven29

7:42 pm on Oct 26, 2018 (gmt 0)

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

toplisek

8:35 pm on Nov 2, 2018 (gmt 0)

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.

lucy24

12:32 pm on Nov 3, 2018 (gmt 0)

Although it seems too complex code

Is that a reference to the code posted by Steven29? If so, it could hardly be less complex.

NickMNS

1:23 pm on Nov 3, 2018 (gmt 0)

@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