CODEWITHSUNDEEP
css
File_Submit
File_Submit

Reputation: 405

CSS: one property for multiple classes

I have the following:

 .category-2 .content aside {margin-top: 4px;}
 .category-3 .content aside {margin-top: 4px;}
 .category-4 .content aside {margin-top: 4px;}

How can use one margin-top for all the three categories?

Upvotes: 0

Views: 70

Answers (3)

illeb
illeb

Reputation: 2947

Use the ',' char to share your property to multiple selectors:

.category-2 .content aside,
.category-3 .content aside,
.category-4 .content aside
{
   margin-top: 4px;
}

This way of formatting css is called comma separated selector, as @Aaron suggests.

Upvotes: 3

Mihai T
Mihai T

Reputation: 17697

either you write as so

.category-2 .content aside,.category-3 .content aside,.category-4 .content aside {margin-top: 4px;}

or it depends on the rest of the html structure for eg 

#category aside { margin-top:4px;}
<div id ="category">
  <div class="category-2">
     <div class="content">
       <aside>
        <p>blabla</p>
       </aside>
      </div>
    </div>
  <div class="category-3">
     <div class="content">
       <aside>
        <p>blabla</p>
       </aside>
      </div>
    </div>
  <div class="category-4">
     <div class="content">
       <aside>
        <p>blabla</p>
       </aside>
      </div>
    </div>
  </div>

Upvotes: 1

fernando
fernando

Reputation: 820

you can use:

div[class^="category"] { margin-top: 4px; }

Upvotes: 1

Related Questions