[Solved] I can't figure out how to 'isolate' the elements in order to style them individually

Hi people,

I've got the following problem ... My blog has a sidebar on the right and a footer at the bottom ... In this sidebar and footer I would like to place a text widget, this is a piece of code that displays a text.. the HTML code for sidebar is :



The footer is basicly the same :

The problem : As you can see there are multiple text widgets in both sidebar and footer. I would like to assign different padding properties to the ones in the footer then the ones in the sidebar .

When I assign padding to the class .textwidget it will put a padding into ALL the text widgets while I don't want that for the footer widgets.

The problem is that when I assign a padding directly to the TEXT-4 ID, which is supposed to override the rest, it doesn't work! And I don't know why ... As you can see in the HTML code I have put the sidebar 1 in a different div... this is a wrapping div. Its used because I actually want to add more then one sidebar in it and let them inherit the attributes I put the wrapping div. So here's the CSS code that is applied to the elements in the sidebar.

#sidebar-wrapper ul {
margin: 0px;
padding: 0px;
list-style:none;
}

#sidebar-wrapper ul ul{
text-align: left;
list-style:none;
}

#sidebar-wrapper ul li {
display: block;
padding:0px; margin-left: 0px;
}

#sidebar-wrapper ul ul li {
display: block;
padding:0px; margin-left: 0px;
}

#sidebar-wrapper ul li ul li {
display: block;
padding:0px; margin-left: 0px;
padding-left:20px;
padding-right:20px;
}

Also, If someone could explain to me the weird selector that is used : and ID, AND 2 classes ? What does that mean ?

So what I actually want to do : is to 'isolate' the text widgets so that I can assign different paddings to each of them individually ... The ID on the text-X doesn't work .... and why I don't know ...

-FOP-