CSS Multiple List - Cascade Priority

I am trying to have two separate customized lists within a single CSS container.
The first list uses the ID of the container and the second list uses a CLASS. The second list is displaying the values from the first list. I realize that this is the priority of the cascade, but I don't understand why the second list is using the value from the first as it appears closest to the list.
I would like to be able to have two lists within the same container and both lists have unique display properties.
I will paste the code (below).
Any help would be greatly appreciated.
dresdena1

<< BEGIN PASTE
#contentbox {
      background-image: url(gray_table_back.jpg);
      width:986px;
      text-align:center;
      margin-bottom:-15px;
      }
#contentbox h1 {
      font: bold 36px arial,helvetica,sans-serif;
      color:white;
      padding: 10px 0;
}
#contentboxleft{
      width:329px;
      float:left;
}
#contentboxleft p{
      text-align: justify;
      text-justify: newspaper;
      font: bold 15px arial,helvetica,sans-serif;
      color:white;
}

#contentboxleft  ul li {
      font: bold 15px arial,helvetica,sans-serif;
      list-style-type: none;
      background-image: URL('star.png');
      background-repeat: no-repeat;
      background-position: left;
      text-align: left;
      padding:4px 0 4px 35px;
      color:white;
      margin-left:40px;
}

.facebookbox{
      width:280px;
      height:205px;
      background-color:white;
      float:left;
      text-align:center;
      border: 7px outset blue ;
      margin-left: 15px;
      margin-top:15px;
}
.facebookbox p{
      font: bold 18px arial,helvetica,sans-serif;
      color:blue;
}
.facebookbox ul li {
      font: bold 15px arial,helvetica,sans-serif;
      list-style-type: none;
      background-image: URL('fb_small.png');
   background-repeat: no-repeat;
   background-position: left;
   text-align: left;
   padding:4px 0 4px 35px;
   color:blue;
   margin-left:40px;
}
----------------------------

<div id="contentboxleft">
<p> DESCRIPTIVE TEXT </p>
<H2>DESCRIPTIVE TEXT 2 </H2>
<ul>
<li>bullet text2</li>
<li>bullet text2</li>
</ul>
<H2>DESCRIPTIVE TEXT 3</H2>
<ul>
<li>bullet text3</li>
<li>bullet text3</li>
</ul>
<H2>DESCRIPTIVE TEXT 4</H2>

<div class="facebookbox">
<p style="color:blue; bold 18px arial,helvetica,sans-serif; text-align:center;">LIKE US on Facebook</p>
<iframe src="//www.facebook.com/plugins/likebox.php</iframe>
<ul>
<li>Updates</li>
<li>Projects</li>
<li>Galleries & Images</li>
<li>and more...</li>
</ul>
</div>
</div>
>>
dresdena1Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mcsweenSr. Network AdministratorCommented:
The problem is the container ID is always open so you are always inheriting the list properties from that container even after you open a class.

Change the #contentboxleft  ul li to a class like facebookbox.  Call the classes around their respective lists with div tags.  Close the first class </div> before opening the next.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
Your problem is specificity.  An id is more specific than a class so the more specific properties always override the less specific class.  

You can learn about specificity here.

Cd&
dresdena1Author Commented:
Thank you!
Worked perfectly!
dresdena1Author Commented:
COBOLdinosaur thanks for the link! Definite reading!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.