Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML list with different images as bullets

Tags:

html

list

I know it is possible to set an image instead of the HTML default bullets:

list-style-image: url(...);

But I havent't found a way how I can set different images in one and the same list. e.G.: Instead of the first bullet, img_1 is shown, instead of the next 5 bullets img_2 is displayed ... .

like image 283
Hansi Zimmrer Avatar asked Jan 16 '14 12:01

Hansi Zimmrer


People also ask

Can we use images as bullets in HTML?

The attribute is used with the HTML <ul> tag, with the CSS property list-style-image to add image bullets to an unordered list.

How would you display a list item with a different bullet?

To create unordered list in HTML, use the <ul> tag. The unordered list starts with the <ul> tag. The list item starts with the <li> tag and will be marked as disc, square, circle, etc. The default is bullets, which is small black circles.

What property would you use to set an image instead of a standard bullet in a list?

The list-style-image property replaces the list-item marker with an image.

Can you put an image in a list item HTML?

Firstly, you need to create the List Item using a li list item tag. Within that List Item tag, you can place your image. You add an image within the Image tag img.


3 Answers

HTML-

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

CSS(doesn't work on IE 7,8)-

ul li:nth-child(1){
list-style-image:url('image1.png');
}
ul li:nth-child(2){
list-style-image:url('image2.png');
}
ul li:nth-child(3){
list-style-image:url('image3.png');
}

CSS for all Browser including IE 7,8

ul li:first-child{
list-style-image:url('image1.png');
}
ul li:first-child + li{
list-style-image:url('image2.png');
}
ul li:first-child + li + li{
list-style-image:url('image3.png');
}
ul li:first-child + li + li + li{
list-style-image:url('image4.png');
}
like image 103
arifix Avatar answered Oct 14 '22 05:10

arifix


Just add a different class in the LI element

<ul class="navlist">
    <li class="img_1">element1</li>
    <li class="img_2">element2</li>
</ul>
<style>
.navlist li.img_1
{
padding-left: 10px;
background-image: url(images/image1.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
.navlist li.img_2
{
padding-left: 10px;
background-image: url(images/image2.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
</style>
like image 3
cardeol Avatar answered Oct 14 '22 06:10

cardeol


You need to use nth-child Property

CSS

li:nth-child(1){list-style-image:url(image)}

Here is the demo http://jsfiddle.net/5VB2u/

like image 2
Dinesh Kanivu Avatar answered Oct 14 '22 06:10

Dinesh Kanivu