1 reply [Last post]
enriquerene
enriquerene's picture
Offline
newbie
Rio de Janeiro - Brazil
Last seen: 4 years 30 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>text
       <ul>
          <li> submenu </li>
       </ul>
   </li>
<li>... more rows in the menu
 
</ul>

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
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 24 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

cheers,

gary

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