1 reply [Last post]
enriquerene's picture
Rio de Janeiro - Brazil
Last seen: 5 years 25 weeks ago
Rio de Janeiro - Brazil
Timezone: GMT-2
Joined: 2015-02-19
Posts: 1
Points: 2

Hello, people,

I have a vertical menu on my website (in construction) as follow:

<ul id="menu">
          <li> submenu </li>
<li>... more rows in the menu

In CSS I put on this:

ul#menu {some things;
         border-radius: 0px 20px 20px 0px;

So my menu background (blue) has the right borders curved a bit, but I wanna do the same in the first and the last list, curving just the topright border in first and the bottomright in the last. Is there some CSS way to do this, just these two lists and leaving unmodified the others lists?

If not, no problem, I can create id="bottom" and id="top" on the bottom/top list and put curve on the border.

//mod edit: Please wrap source code in the [code] and [/code] tags. Fixed. ~gt

gary.turner's picture
Last seen: 14 hours 47 min ago
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

:first-child and :last-child

See Selectors CSS3, specifically :first-child and :last-child.

For example,

#menu > li:first-child {
  border-radius: 0 20px 0 0;
#menu > li:last-child {
  border-radius: 0 0 20px 0;

I used the child selector so it would not affect sub-menu list items.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.