Hello everyone, tell me how to set selectors correctly, so that all objects 6 and objects 8.9 are not in another frame.

How should it happen

.content .right-bar div { margin: 10px; padding: 10px; border: 2px solid black; font-size: 20px; } 
 <div class="content"> <div class="left-bar"> <div class="four">4</div> <div class="seven">7</div> </div> <div class="right-bar"> <div class="five">5</div> <div class="center"> <div>6</div> <div>6</div> <div>6</div> <div>6</div> <div>6</div> <div>6</div> </div> <div class="bottom"> <div class="eight">8</div> <div class="nine">9</div> </div> </div> </div>

    2 answers 2

    Did I understand the problem correctly?

     .content .left-bar .four,.seven, .right-bar .five, .center div, .bottom .eight, .nine { margin: 10px; padding: 10px; border: 2px solid black; font-size: 20px; } 
     <div class="content"> <div class="left-bar"> <div class="four">4</div> <div class="seven">7</div> </div> <div class="right-bar"> <div class="five">5</div> <div class="center"> <div>6</div> <div>6</div> <div>6</div> <div>6</div> <div>6</div> <div>6</div> </div> <div class="bottom"> <div class="eight">8</div> <div class="nine">9</div> </div> </div> </div>

    • one
      Yes, thanks, I have already figured out, of course, but I wonder if it can be made more compact? - Gleb Pristupa
    • .content .left-bar .four, .seven, .right-bar .five, .center div, .bottom .eight, .nine - Do you want to do this more compactly? Or html? - Fox Alice

    Trace the div elements that are directly (are first-level subelements) in the .right-bar elements that are somewhere inside the .content :

     .content .right-bar > div { margin: 10px; padding: 10px; border: 2px solid black; font-size: 20px; } 
     <div class="content"> <div class="left-bar"> <div class="four">4</div> <div class="seven">7</div> </div> <div class="right-bar"> <div class="five">5</div> <div class="center"> <div>6</div> <div>6</div> <div>6</div> <div>6</div> <div>6</div> <div>6</div> </div> <div class="bottom"> <div class="eight">8</div> <div class="nine">9</div> </div> </div> </div>

    • I apologize, I incorrectly voiced the question, I meant that all the numbers were in a frame, but .center and .bottom were not a frame - Gleb Pristupa '