CODEWITHSUNDEEP
csscss-specificity
Brett
Brett

Reputation: 20049

Using multiple classes in one element and specificity

Just wondering when you use multiple classes on the one element such as class="foo bar" and those classes are setup as below:

.foo {
    margin-right: 10px;
}


.bar {
    margin-right: 0px;
}

Which class will have specificity? Will the margin be 10px or 0px?

Upvotes: 24

Views: 17031

Answers (4)

Rion Williams
Rion Williams

Reputation: 76547

It works based on precedence within the CSS. Therefore the item to occur most recently will override any previous styles.

CASE 1

.red  { background : red; }
.blue  { background : blue; }

class = 'red blue' would be blue in this instance.

CASE 2

.blue  { background : blue; }
.red  { background : red; }

class = 'blue red' would be red in this instance.

Working Example

Upvotes: 36

Joel Glovier
Joel Glovier

Reputation: 7679

Also, if you wish to target the element who has only both classes, you can use this syntax:

<ul>
  <li class="foo first">Something</li>
  <li class="foo">Somthing else</li>
  <li class="foo">Something more</li>
</ul>

.foo {
  color: red;
}
.foo.first {
  color: blue
}

Upvotes: 9

MK_Dev
MK_Dev

Reputation: 3333

In addition, more "specific" class will override a more generic one:

HTML:

<div class="foo">
    <div class="bar">Hello World!</div>
</div>

With the following CSS:

.foo .bar { margin-left:25px }
.bar { margin-left:0px }

Notice how the inner div still has 25px margin to the left?

Also, read up on "!important" argument after providing the value:

.bar { margin-left:0px!important }

Check out

Upvotes: -2

wsanville
wsanville

Reputation: 37516

A single class name carries the same weight. In such a scenario, the rule that is listed first will be overwritten by the second, and hence, the element will have margin-right: 0px;

Here is a simple example using color instead of margin, because it's easier to visualize. The value specified in bar will be chosen by the browser.

Upvotes: 5

Related Questions