CODEWITHSUNDEEP
htmlcsshtml-lists
user3294433
user3294433

Reputation: 13

Affect li without having to class every li

So sorry if I'm asking a question that's been answered elsewhere...I can't find the answer, perhaps because I don't know how to ask it.

But I'm trying to figure out how to affect list items by setting up the class for the ul, so I only have to call the class in the ul without having to call the class for every list item.

I have a list of blue dot icons and a list of green dot icons.

I want to be able to do this

<ul class="greendot">

  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

with the css like so:

ul.greendot {

    list-style-image: url(http://greendot.jpg);
}

Thank you!

Upvotes: 1

Views: 144

Answers (2)

RealDeepak
RealDeepak

Reputation: 863

See, If your CSS is ul.greendot then it will work for <ul class="greendot"> ....</ul> And if you CSS is only for ul then it will work for both ul list.

<!DOCTYPE html>
<html>
<head>
<style>
  /* only for greendot ul */
  ul.greendot 
  {
    list-style-image:url('http://greendot.jpg');
  }

 /* For both ul */
 ul 
  {
    list-style-image:url('http://greendot.jpg');
  }
</style>
</head>

<body>
<ul class="greendot">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
<ul class="reddot">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
</body>
</html>

Upvotes: 1

Ethan Pelton
Ethan Pelton

Reputation: 1796

I recommend that you remove the bullet at the UL, then add a background image as the style for each LI...

The styles should look like this...

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul.greendot li
{
background-image: url(greendot.png);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

and the html body looks like this...

test
<ul class="greendot">
<li>test 1</li>
<li>test 2</li>
</ul>

Upvotes: 1

Related Questions