css dla ostatniega <a> w danym div

pytanie zadane 14 września 2023 w HTML i CSS przez zbiku25 Gaduła (3,000 p.)

Cześć,

Próbuję zrobić menu, które będzie składać się z kilku sekcji. w formie:

SEKCJA 1

kilkalny link
klikalny link

SEKCJA 2

kilkalny link
klikalny link

Zależ mi aby tak sformatować "klikalne linki" aby wszystkie oprócz ostatniego miały obrabowanie dolne.

Próbowałem tak, ale nie działa:

              <div class = "left-menu">               
                    <div>SEKCJA 1</div>
                    <a href = "#">klikalny link</a>
                    <a href = "#">klikalny link</a>

                <div>SEKCJA 2</div>
                    <a href = "#">klikalny link</a>
                    <a href = "#">klikalny link</a>

CSS:

.left-menu a{
    display:block;
    color:#F3F3F3;
    text-decoration: none;
    padding: 8px;
    margin-left:15px;
    border-bottom:1px solid grey;
    width:200px; 
}

.left-menu div a:last-child{
    border-bottom:none;
}

Ma ktoś jakiś pomysł co jest nie tak?

komentarz 14 września 2023 przez Comandeer Guru (604,780 p.)

Chodzi Ci o ostatni link w .left-menu czy też o link bezpośrednio przed kolejnym div z nazwą sekcji?

komentarz 14 września 2023 przez zbiku25 Gaduła (3,000 p.)

bezpośrednio przed kolejnym div z nazwą sekcji

3 odpowiedzi

odpowiedź 14 września 2023 przez VBService Ekspert (255,800 p.)
wybrane 14 września 2023 przez zbiku25

Najlepsza

Sprawdź jeszcze taki sposób

[ on-line ]

<a href="#">Link</a>
<a href="#">Link</a>
<div>Div</div>
<a href="#">Link</a>
<a href="#">Link</a>
<div>Div</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<div>Div</div>
<a href="#">Link</a>
<a href="#">Link</a>

a {
	display: block;
	color: #000;
	text-decoration: none;
	padding: 8px;
	margin-left: 15px;
	border: none;	
	width: 200px; 
}
a + a {
	border-top: 1px solid grey;
}

komentarz 14 września 2023 przez zbiku25 Gaduła (3,000 p.)

super, najprostsze działające rozwiązanie, wskazuję jako najlepszą odpowiedź

Dzięki!

odpowiedź 14 września 2023 przez Comandeer Guru (604,780 p.)

odpowiedź 14 września 2023 przez Visual Studio Kot Bywalec (2,550 p.)

<div class="left-menu">               
      <h2>SEKCJA 1</h2>
      <a href = "#">klikalny link</a>
      <a href = "#">klikalny link</a>
 
      <h2>SEKCJA 2</h2>
      <a href = "#">klikalny link</a>
      <a href = "#">klikalny link</a>
</div>

.left-menu a {
    display:block;
    color: #000;
    text-decoration: none;
    padding: 8px;
    margin-left: 15px;
    border-bottom: 1px solid grey;
    width: 200px; 
}
 
.left-menu a:last-of-type {
    border-bottom: none;
}

Teraz powinno działać.

komentarz 14 września 2023 przez zbiku25 Gaduła (3,000 p.)

użycie obydwu powyższych odpowiedzi jednocześnie pozwoliło rozwiązać problem (jedna wskazówka dotyczyła wszystkich <a> poza ostatnim (po którym nie występował div, natomiast druga dotyczyła bezpośrednio ostatniego a w całej klasie.
Dziękuję