CSS - How to select an id inside a class

Question

I have several tables. So I use a datatable.css. To deal with the header I use

     .order-table-header{}

(so I use a class for header)

I want now to differentiate my tables so logically use an id, something like that :

#Other{}

But it doesn't do what's inside the #Other{}

here is my code :

.order-table-header{
text-align:center;
background:none repeat scroll 0 0 #dddddd;
border-bottom:1px solid #BBBBBB;
padding:16px;
width: 8%;
background-color: #0099cc;
color: #ffffff;
line-height: 3px;
}
#Other .order-table-header{
background-color: #00ff00;
}

I tried the other way around

 .order-table-header #Other{}

I tried with just other

#Other{}

Here is my xhtml :

      <h:dataTable value="#{workspace.otherfiles}" 
                   var="item"
                   styleClass="datatable.css"
                   headerClass="order-table-header"
                   rowClasses="order-table-odd-row, order-table-even-row"
                   id="Other">

I also tried :

.order-table-header(@background : #0099cc){
text-align:center;
background:none repeat scroll 0 0 #dddddd;
border-bottom:1px solid #BBBBBB;
padding:16px;
    width: 8%;

    background-color: @background;

    color: #ffffff;
    line-height: 3px;
}
#Other {
 .order-table-header(#00ff00);
}

but netbeans tell me unexpected symbol found for the firs line and for the line inside other

Answer 1

.order-table-header #Other (note the space between header and #Other) means: "node with id 'Other' that is a descendant of node with class 'order-table-header'". So a node having id "Other" and class "order-table-header" won't match a CSS rule having pattern .order-table-header #Other. However a node can match more than one rule. Try changing the corresponding part of your first example to:

#Other {
  background-color: #00ff00;
}

Answer 2

try this #Other .order-table-header{ css } since the #Other will be the id of the table and .order-table-header will be the class of the table header