Use CSS selectors to selectively style list

Question

I have an element that can contain multiple unordered lists.

I want to selectivly style the separators - that is the separators that divide LI elements and separators that divide UL elements. Here's some HTML:

What I'm effectively trying to achieve is:

Everything is separated either by UL separator or LI separator
If it's the last UL, no UL separator but last LI has a separator
If it's not the last UL - the last LI has no separator

<div>
    <ul>
        <li></li><!-- has blue bottom border -->
        <li></li><!-- has blue bottom border -->
        <li></li><!-- HAS NO BOTTOM BORDER -->
    </ul><!-- has green bottom border -->
    <ul>
        <li></li><!-- has blue bottom border -->
        <li></li><!-- has blue bottom border -->
        <li></li><!-- has blue bottom border -->
    </ul><!-- HAS NO BOTTOM BORDER -->
</div>

I've come up with this code - which works but the last LI of the last UL dows not have a separator.

.nav-blue ul
{
    border-bottom:solid 0.5rem Green;
}

.nav-blue ul:last-child
{
    border-bottom:0;
}

.nav-blue li
{
    border-bottom:solid 0.1rem Blue;
}

.nav-blue li:last-child
{
    border-bottom:0;
}

/* This does not work */
.nav-blue not(ul:last-child) li:last-child
{
    border-bottom:solid 0.1rem Blue;
}

There may be also be prettier ways of achieving this and I'm keen for help and further advice.

Thanks in advance.

Can you not apply classes to the ul or li elements?

zigojacko
– zigojacko

2015-01-27 11:19:39 +00:00
Commented Jan 27, 2015 at 11:19 — zigojacko
– zigojacko, Commented Jan 27, 2015 at 11:19

Fabrizio Calderan · Accepted Answer · 2015-01-27 11:50:06Z

3

Using :not pseudoselector (in your example you forgot the :) you can write like so

/* 1 */ div li { 
            border-bottom: 1px blue solid; 
        }

/* 2 */ div ul:not(:last-child) { 
            border-bottom: 1px green solid; 
        }

/* 3 */ div ul:not(:last-child) li:last-child { 
            border-bottom: 0; 
        }

Basically with these rules the border

is always set on li (blue)
is always set on ul (green) except when it is the last-child
is removed on every li:last-child except when it belongs to the last ul

edited Jan 27, 2015 at 11:50

answered Jan 27, 2015 at 11:19

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anji · Accepted Answer · 2015-01-27 11:34:43Z

1

try this : http://jsfiddle.net/zj9v81t7/19/

and css code :

ul , li{margin:0; padding:0}
div ul
{
    border-bottom:1px solid Green;
    padding-bottom:10px; margin-bottom:10px;

}
div ul li
{
    border-bottom:1px solid blue;
}
div ul li:last-child{
    border-bottom:0;
}

div ul:last-child
{
    border-bottom:0;
}

div ul:last-child li
{
    border-bottom:1px solid blue;
}

answered Jan 27, 2015 at 11:34

anji

3443 silver badges6 bronze badges

Collectives™ on Stack Overflow

Use CSS selectors to selectively style list

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related