different style for li between first and end

Question

I want to style an ul, but the first li and last li should have different styles than the ones between them.

I know the below code is probably very wrong, but can you see what i'm trying to do?

.menu li:hover:not(.menu li:nth-last-child(1)) { border:red solid 1px; }

The HTML is only basic, just want some CSS's styles I can use for any other menus.

<ul class="menu">
   <li>All</li><li>Refresh</li><li>Saved</li>
</ul>

So, how do I style the middle li's when the user hovers over them? I want to do this to avoid putting a border in the middle of each list item.

score 3 · Accepted Answer · edited May 23 '17 at 11:57

First solution: custom styles for first and last elements

One way is to style every <li> element and then customize the first and the last ones. For this, :first-child and :last-child are your friends.

With HTML such as:

<ul class="menu">
    <li>All</li>
    <li>Refresh</li>
    <li>Something else</li>
    <li>Saved</li>
</ul>

and the following CSS:

.menu li:first-child { font-weight: bold; }
.menu li:last-child { font-style: italic; }

You'll obtain:

All

Refresh

Something else

Saved

Second solution: apply a style to element 2 to n-1

If you can't, for a reason, define a common style for all list elements, and customize it for the first and the last ones, you can use the :not keyword. .menu li:not(:first-child) will exclude the first element, and .menu li:not(:last-child)—the last one.

Multiple :not are combined this way:

element:not(selector1):not(selector2)

which means that your CSS becomes:

.menu li:not(:first-child):not(:last-child)

For example:

.menu li:not(:first-child):not(:last-child) { font-weight: bold; }

will produce:

All

Refresh

Something else

Saved

Been using them, so I can style the first one and end, but how can I style the ones in between without styling the first and end one? — Martyn Ball, Jul 16 '14 at 00:27

score 0 · Answer 2 · answered Jul 16 '14 at 00:20

Try using a CSS selector. The code below will affect the first and last child of the parent (UL).

ul:first-child {
 Style attributes here
}

ul:last-child {
  Style attributes here
}

More info on CSS selectors here http://www.w3schools.com/cssref/css_selectors.asp

different style for li between first and end

2 Answers2

First solution: custom styles for first and last elements

Second solution: apply a style to element 2 to n-1