Question

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">
</div>

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??

Answer 1

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.