Several CSS classes with just one property that's different?

Question

This is a simple question, I just don't know how to search for it in the web.

I have three CSS classes: .header, .cell, .footer. They look like the following:

.header
{
    display:table-cell; 
    vertical-align:middle; 
    width:130px;
    height:20px; 
    background-color: Yellow; 
    border: 1px solid silver;
}
.cell
{
    display:table-cell; 
    vertical-align:middle; 
    width:130px;
    height:85px; 
    background-color: Yellow; 
    border: 1px solid silver;
}
.footer
{
    display:table-cell; 
    vertical-align:middle; 
    width:130px;
    height:40px; 
    background-color: Yellow; 
    border: 1px solid silver;
}

The only difference between all these classes is the height property. How can I simplify this code?

Thanks.

score 5 · Accepted Answer · edited Jul 21 '16 at 19:52

5

Use , to separate the elements in the selector list for the common properties:

.foo, .bar {
   color: red;
}

.foo {
   font-size: 120%;
}

.bar {
   font-size: 80%;
}

This'll make both .foo and .bar be red, but have different text sizes.

edited Jul 21 '16 at 19:52

Devid Farinelli

7,514
9
42
73

answered Jul 21 '16 at 18:39

Marc B

356,200
43
426
500

1

Note user-defined classes need to be preceded by `.` - because `foo` and `bar` are not native classes, it would read `.foo, .bar { ...`. – Brandon Dube Jul 21 '16 at 18:41

Several CSS classes with just one property that's different?

1 Answers1