HTML syntax for selector with multiple subclasses

I am trying to define a css rule for multiple sublcasses of a selector. Here is an example of the html.

<div id="row1">
    <div class="col1">
    <div class="col2">
    <div class="col3">
</div>
<div id="row2">
    <div class="col1">
    <div class="col2">
    <div class="col3">
</di开发者_高级运维v>

Say I want to make the width of col1, col2, col3 within row1 all the same. I tried this css but it doesnt stay specific to row1:

#row1 .col1, .col2, .col3{
    width: 80px;
}

I can probably add #row1 infront of every .col but that wouldnt look as nice. What is the correct way to do this??

This should do:

#row1 > div
{
    width: 80px;
}

The rule applies to every div element that is a child of #row1. I specified a child selector (the >) in case you have nested div elements that you do not want the rule to apply to.

I can probably add #row1 infront of every .col but that wouldnt look as nice. What is the correct way to do this??

That is the only way to do that, at least to get the rule you describe.

With the markup you have, you could get the same effect with:

#row1 div