CSS3 How to create a selector for table data cell nested within a class

I am trying to figure out how to the do the following:

For table data cells nested within the goldBox class of table data cells create  a style rule to display the background image file goldbox.jpg centered within the cell and not tiled.

Will the selector be td.goldBox {/* style rule */}?

                  <table class="outer-table">            
                        
                        <thead>
                              <tr>                                 
                                    <th>1</th>
                                    <th>2</th>
                                                                                                            
                              </tr>
                        </thead>
                        
                        <tbody>
                              <tr>
                                    <th>A</th>
                                    <td class="greenBox"  rowspan="3" colspan="3">
                                          <table class="inner-table">
                                                <tr>
                                                      <td></td>
                                                      <td></td>
                                                      <td>4</td>
                                                </tr>
                                                <tr>
                                                      <td></td>
                                                      <td></td>
                                                      <td></td>
                                                </tr>
                                                <tr>
                                                      <td></td>
                                                      <td>3</td>
                                                      <td>5</td>
                                                </tr>
                                          </table>
                                    </td>                                    
                              </tr>                  
                        </tbody>
                        
                  </table>
cookiejarAsked:
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.

Tom BeckCommented:
td.goldBox table.inner-table td {
    background: #fff url(goldbox.jpg) no-repeat center center
}
The "table.inner-table" is optional but I always like to be as specific as possible.
Your markup sample says greenBox but I assume you have a similar one with goldBox.
Julian HansenCommented:
Where is the goldbox class in the code you posted?

Also consider using code tags - makes your code easier to read and refer to.

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
cookiejarAuthor Commented:
Tom Beck,

Thank you, it works beautifully.  Could explain to me or give some type of reference to explain why the selector td.classname  {}  doesn't work and why td.classname td {} does?.  I would like to grasp the concept.
Tom BeckCommented:
td.classname {} would target any <td> with class classname, <td class="classname">

"cascading" in cascading style sheet (CSS) refers to the naming convention that allows one to describe a hierarchy of elements with the syntax ancestor-space-descendant as in td.classname td {} which means <td>s that are descendants of <td>s with the class classname.

<td class="classname">
   <table>
      <tr>
         <td></td> <!-- A descendant <td> of the ancestor td.classname -->
      </tr>
   </table>
</td>

CSS also allows you to target only direct children of parent elements with the ">" symbol. For example, this would target only the <li>s inside a ul.classname but NOT <li>s inside of those <li>s.

ul.classname > li {}

<ul class="classname">
   <li>Some text</li> <!-- affected -->
   <li>submenu (affected)
      <ul>
         <li>sub menu item</li> <!-- NOT affected -->
      </ul>
   </li>
</ul>
Julian HansenCommented:
I think you selected the wrong solution - did you not want to select one of TomBeck's posts?

Mine did not provide a solution.
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.