How to make class inner ul li css

Question

The following css style be like this:

ul {         
    padding:0 0 0 0;
    margin:0 0 0 0;
}
#foo li {     
   list-style:none;
   margin-bottom:25px;           
}
ul li img {
   cursor: pointer;
}

The ul li has included:

<ul id="foo" class="row">
  <li class="col-lg-3 col-md-3 ">
  <img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
  </li>
</ul>

Is it possible to change #ul from id into class ? I tried be like this:

ul {         
  padding:0 0 0 0;
  margin:0 0 0 0;
}
li.bar {     
  list-style:none;
  margin-bottom:25px;           
}
ul li img {
  cursor: pointer;
}

<ul id="" class="row bar">
  <li class="col-lg-3 col-md-3 ">
    <img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
  </li>
</ul>

It works but there's something wrong that I think it's not working as well.

Answer 1

Since your li tag doesn't have the .bar class it can't work.

If you want to style the li change the css to:

.bar li {
    list-style:none;
    margin-bottom:25px; 
}

or

if you want to style the ul change the css to:

ul.bar {
    list-style:none;
    margin-bottom:25px;
}

With your css code you style a li tag with the .bar class.

Answer 2

Try this instead

ul.bar li{     
    list-style:none;
    margin-bottom:25px;           
}

Or this

.bar li{     
    list-style:none;
    margin-bottom:25px;           
}