html - Exclude CSS property for only one element

Question

I have a page with a default CSS file. In this page I have:

<ul>
  <li>A1</li>
  <li>A2</li>
</ul>
<br> 

<ul>
  <li>B1</li>
  <li>B2</li>
</ul>
<br> 

<ul>
  <li>C1</li>
  <li>C2</li>
</ul>  
<br> 

I can view the default CSS but I cannot amend

ul {
  paddind-left:15px;
} 

what I want to do is to exclude only B1 and B2 from the default css. A and C should still have the default property but B1 and B2 should have PADDING-LEFT:0PX;.

I have used (cssreset-min.css) but all the css was eliminated. Any help?

Answer 1

Give the parent ul a new class:

<ul>
  <li>A1</li>
  <li>A2</li>
</ul>
<ul class="newClass">
  <li>B1</li>
  <li>B2</li>
</ul>
<ul>
  <li>C1</li>
  <li>C2</li>
</ul>

Then do:

ul.newClass {
  paddind-left:0px;
}

This will work in all browsers. If you're not concerned about that, use @Andy answer.

Answer 2

If I understand right, ul li:nth-child(3), ul li:nth-child(4) { padding-left: 0; } should work

The nth-child selector targets specific children, in this case the 3rd and 4th

Edit: After seeing your edit, the new code that you will need to do is: (I will use #container as the name for your containing div, whatever that is)

#container ul:nth-child(2) li { padding-left: 0; }

Answer 3

if you want to apply for this 3 named list..simply use div with different id for B1,B2....but if you want to apply for an huge list it would be difficult

Answer 4

You can try something like this :

http://jsfiddle.net/4X62Y/

Answer 5

Here's another solution without changing the HTML:

ul:not(:nth-child(3)) {
  padding-left:15px;
}

Example

This will probably not work in all browsers, you'll need to change the HTML for that and use the answer provided by @Alex Thomas .