0

I have a HTML list that has rounded corners, the list items have distinct background colors and list items can be toggled via JavaScript:

$(function() {
  $("#menu .header").on("click", function() {
    $(this).nextUntil(".header").toggle();
  });
});
body {
  font: medium sans-serif;
}
#menu {
  padding: 0;
  list-style-type: none;
}
#menu li {
  padding: 1em;
}
/**** colors ****/
#menu li {
  color: #FFF;
  background-color: #000;
}
#menu li.header {
  color: #FFF;
  background-color: #09F;
}
/**** corners ****/
#menu li:first-child {
  border-radius: 1em 1em 0 0;
}
#menu li:last-child {
  border-radius: 0 0 1em 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>Menu 1</li>
  <li class="header">Menu 2 (click to toggle)</li>
  <li>Menu 2-1</li>
  <li>Menu 2-2</li>
  <li>Menu 2-2</li>
  <li class="header">Menu 3 (click to toggle)</li>
  <li>Menu 3-1</li>
  <li>Menu 3-2</li>
  <li>Menu 3-3</li>
</ul>

Problem: the round corners at the bottom disappear when the last item (last-child) is hidden. I tried adding round corners to the parent (#menu) but it does not work since children have background colors.

I want the last visible child to have round corners. What is the best no-javascript solution to achieve the desired result?

Salman A
  • 262,204
  • 82
  • 430
  • 521
  • Does "no jQuery" mean no JavaScript or can I use JavaScript to answer this question as long as I don't use external libraries? – 11684 Dec 21 '14 at 18:08
  • Okay, then I don't know how to either. – 11684 Dec 21 '14 at 18:20
  • What is the reason for this ? You are already using jQuery to toggle elements. – Niloct Dec 21 '14 at 18:49
  • @Niloct I have specific needs. Just assume that toggle is handled by a script that I cannot (or do not want to) change. – Salman A Dec 21 '14 at 19:32
  • I have good news, and bad news. Unfortunately, more of the latter than of the former. The good news is, that it _can_ be done with CSS 3 iff the element is hidden with JavaScript (which seems to be the case here). The bad news is that it is an extremely ugly solution and that your question is a duplicate of this one: http://stackoverflow.com/questions/5275098/a-css-selector-to-get-last-visible-div. (You'll find the solution I mentioned there.) I'm sorry, but voting to close. – 11684 Dec 22 '14 at 10:33
  • No, those answers **do not help at all**. The CSS _last of some selector_ has not been invented yet. – Salman A Dec 22 '14 at 10:38

1 Answers1

1

I'd change the CSS to this (you'll notice I just moved the border-radius to the full list instead of individual list items and added the overflow: hidden to prevent the corners from being hidden behind the list items):

body {
  font: medium sans-serif;
}
#menu {
  padding: 0;
  list-style-type: none;
  border-radius: 1em;
  overflow: hidden;
}
#menu li {
  padding: 1em;
}
/**** colors ****/
#menu li {
  color: #FFF;
  background-color: #000;
}
#menu li.header {
  color: #FFF;
  background-color: #09F;
}
delCano
  • 385
  • 2
  • 12