Link to home
Start Free TrialLog in
Avatar of dresdena1
dresdena1

asked on

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>
>>
ASKER CERTIFIED SOLUTION
Avatar of Bradley Fox
Bradley Fox
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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&
Avatar of dresdena1
dresdena1

ASKER

Thank you!
Worked perfectly!
COBOLdinosaur thanks for the link! Definite reading!