CODEWITHSUNDEEP
htmlcss
wharfdale
wharfdale

Reputation: 752

UL List - Different coloured bullets

Is it possible to change the colour of each individual bullet icon (or even just use a different image on each) on a ul li element? So 1 is green, 2 is blue, 3 is yellow etc. Via CSS.

Here is my little list now, I'd like to make the bullets bigger if possible.

<nav class="navigation-list">
    <ul>
        <li><a href="/" class="active">home</a></li>
        <li><a href="/About-Us" >about us</a></li>
        <li><a href="/Products" >products</a></li>
        <li><a href="/Contact-Us" >contact us</a></li>
        </ul>
</nav>

CSS

#header .navigation-list { 
    float: left; 
}
#header .navigation-list ul { 
    margin-top: 38px; 
}
#header .navigation-list ul li { 
    display: inline; 
    list-style-type: none; 
    padding: 0 25px; 
    font-family: newsgoth_btbold; 
    font-size: 12px; 
}

This is what I am after: http://tinypic.com/r/11ux6xk/8

Upvotes: 0

Views: 304

Answers (2)

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

If you are defining a pattern like every third element will be yellow. Every second bullet will be red, then that can be achieved using nth-child pseudo class

#header .navigation-list ul li:nth-child(3n) { color:green; }
#header .navigation-list ul li:nth-child(3n+1) { color:blue; }
#header .navigation-list ul li:nth-child(3n+2) { color:yellow; }

If you want to implements different different color, then you need to give individual styling

Upvotes: 1

ZeroBased_IX
ZeroBased_IX

Reputation: 2727

ul{
   list-style-type: none;
   list-style-position: outside;
   list-style-image: none;
}

li:before {
   content: "• ";
}


.navigation-list ul li:nth-child(1){
   color: red; /* or whatever color you prefer */
}

.navigation-list ul li:nth-child(2){
   color: blue; /* or whatever color you prefer */
}

You would need to do this for each of your list items changing the nth-child +1

Upvotes: 1

Related Questions