Question

I have the following CSS classes.

.button {
    display: block;
    float: left;
    line-height: 25px; 
    height: 33px; 
    padding-left: 10px; 
    text-decoration: none;
    margin: 0.375em;
    text-align: center;
}


.button elong {
    display: block;
    padding: 4px 10px 4px 0; 
    min-width: 95px;
}

.button.details { background: url(button_turquoise.gif) -290px -152px no-repeat scroll; color: #333333; text-shadow: 0 1px 0px #c6faff;}

.button.details elong { background: url(button_turquoise.gif) 100% 0px no-repeat; }

My .erb file has the following

   <td> <%= link_to 'Show', {:action => 'show', :id => book.id, :method => :get}, {:class => 'button details elong'}-%></td>

My question: how could we include several CSS classes .button, .button.details, .button.details elong into the :class => ‘class1 class2 …’.

The above does not work.

Thanks

Answer 1

You can’t do it that way.

CSS classes are hierarchical so:

.button.details will only work for a structure like the following:

<div class="button">
  <div class="details">
  </div>
</div>

It means for all children of .button with the class .details apply the following styles. However the classes you wish to apply are all in the same level in the DOM (the button.)

Change your CSS to the following and your sample code will work.

.button {
    display: block;
    float: left;
    line-height: 25px; 
    height: 33px; 
    padding-left: 10px; 
    text-decoration: none;
    margin: 0.375em;
    text-align: center;
}


.elong {
    display: block;
    padding: 4px 10px 4px 0; 
    min-width: 95px;
}

.details { background: url(button_turquoise.gif) -290px -152px no-repeat scroll; color: #333333; text-shadow: 0 1px 0px #c6faff;}

 .elong { background: url(button_turquoise.gif) 100% 0px no-repeat; }

If you want to give some structure, then add an element above the button and make that the parent.

<td class="actions"> <%= link_to 'Show', {:action => 'show', :id => book.id, :method => :get}, {:class => 'button details elong'}-%></td>

Then you can use the CSS in the following way:

.actions .button {
}

.actions .details {
}

.actions .elong {
}