How to combine the two same css selector into one?


Tags: html,css

Problem :

There are two same css selector in the css file.

div.left  {
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; }
div.right  {
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; }

I find that div.left div.right can not combined into one css selector.

div.left  div.right{
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; }

How to make the css file simple in my case?



Solution :

The problem:

Your first suggestion of

div.left  div.right{
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; 
}

actually matches the html code:

<div class="left">
    .
    .
    .
    <div class="right>Stuff here</div>
    .
    .
    .
</div>

The style will only apply to the class="right" div above. This is because a space between selectors in your CSS indicates that it applies only to div elements with a class of right which are contained within a parent div of class left.

The solution:

Instead you want to use a comma to indicate a list of unrelated selectors that share the same style as follows:

div.left, div.right{
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; 
}

This now matches the following html code where either div is unrelated to the other and can be placed anywhere in your document:

<div class="left">Stuff here</div>
.
.
.
<div class="right">Stuff here</div>

    CSS Howto..

    How do you make a floated element fill the remaining horizontal space when it is between its fixed width siblings?

    How to override css property to default?

    How can I center three tables in a div?

    Selenium IDE - How to check that an element is (CSS) visible?

    How to modify only via CSS a color already defined in HTML?

    How to add Navigation dropdown menu?

    How does 'em' css unit work for positioned elements?

    How to make slanted CSS arrow pointing to a div

    How to position a vertical menu as nested
      under horizontal parent

    How do i hide html until its processed with javascript?

    How to output CSS files to single directory from several input directories?

    margin-top set by jQuery makes content jump. How can I make it smoothly animate?

    How to fix crispy text in Safari 5 Mac OS X after using css 3d transforms?

    how can i add extra element style for external css file?

    How to include a google map in an application

    How to make Bootstrap container auto for height?

    How I add a CSS class to first element of an array in PHP?

    CSS - How to centre a link button

    How to make value text in form be italic

    How do I remove the underline from an image wrapped in an anchor?

    how to hover after calling jquery animate()

    How to reference all the rows except the first one using css

    HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

    How to remove white border from blur background image

    How to center li tags list

    How to create CSS for an existing web application that now is used in a Kiosk with touch screen

    how to have the text under the logo css

    How do I get these two columns to have the same height at all times - CSS?

    How to set text area to maximum width in bootstrap

    How do I select certain siblings via CSS?