1 reply [Last post]
enriquerene's picture
Rio de Janeiro - Brazil
Last seen: 7 years 41 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: 1 year 39 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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