First time visitor? The tutorials start here.

The Cascade in CSS: Different Ways to Target the Same Element

Which one takes precedence?

I’ve had to discover these rules through trial and error over the years and have never tried explaining it to anyone else in detail, so please bear with me and feel free to ask questions in the comments below if any of it needs clarification.

Note: If you don’t know the difference between id and class and how to target each with CSS, you should take my easy-to-follow beginner’s tutorials before continuing.

#id over .class

Let’s say you have this in your xHTML:

<div id="sidebar">
  Some content here

<div class="box" id="box1">
  Some content here
</div><!-- end box1 -->
<div class="box" id="box2">
  Some content here
</div><!-- end box2 -->

  Some content here
</div><!-- end sidebar -->

.box

If you use .box in your CSS for targeting, it will affect both boxes that have the class name of "box".

#box1

If you use #box1 in your CSS for targeting, it will affect the first box only.

#box1 will also take precedence over .box, redefining anything you have defined for .box.

Example:

.box {
	background: #eee;
	border: 1px solid #ccc;
	font-size: 12px;
}
#box1 {
	font-size: 11px;
}

In this example, both boxes have a light gray background and a thin border. But, the 2nd box has a 12px font-size while the first box has a font-size of 11px, because the id of box1 was defined specifically over the more generic class name of box.

Now let’s mix those around, putting #box1 before .box but using the same exact attribute values for each.

#box1 {
	font-size: 11px;
}
.box {
	background: #eee;
	border: 1px solid #ccc;
	font-size: 12px;
}

Following the rules that are outlined in The Cascade in CSS, one might think that .box overrides the font-size for #box1 because .box is listed later. However, since id takes precedence over class, the font-size in "box1" would still have an 11px font-size.

If you have trouble remembering this rule, try to think of it this way….

As explained in the beginner’s tutorials here, an id is a unique identifier, and each id can appear only once on each page. You can only have one header, one footer, and one element that contains everything on the page. If you have more than one sidebar, you have to give each of them its own id, such as sidebar1 and sidebar2, or sidebar-left and sidebar-right… whatever you want to name them, as long as they are unique and follow the rules (may only contain certain characters, no spaces, must start with a letter, etc).

A class, on the other hand, may pertain to many different elements on the page. For example, in this sidebar, I have two boxes that I put into the "box" class, both of which happen to be in the sidebar, which I conveniently gave the id of "sidebar".

So, to help you remember which takes precedence, #id or .class, remember that the more specifically-targeted elements will always take precedence over the more generically-targeted ones, no matter which order they appear within the style sheet. Since each id must be unique, then it is more specific to target an id than it is to target a class.

The rest of this article is really just a reinforcement of this same rule, but it might help you get a better understanding of it…

#id .class over .class

I’m going to re-post that xHTML example here so you can refer back to it more easily:

<div id="sidebar">
  Some content here

<div class="box" id="box1">
  Some content here
</div>&lt!-- end box1 -->
<div class="box" id="box2">
  Some content here
</div><!-- end box2 -->

  Some content here
</div><!-- end sidebar -->

 

Now let’s say you have this in your CSS:

.box {
	background: #eee;
	border: 1px solid #ccc;
	font-size: 12px;
}
#sidebar .box {
	font-size: 11px;
}

Which areas do you think this will affect, and what font-size do you think those areas will have?

If you answered that both boxes in the sidebar will have an 11px font-size, then you are correct.

If there are other elements on your page outside the sidebar that have the class name of box, then those elements would have a 12px font-size, while the boxes inside the sidebar will all have an 11px font-size.

Now let’s say you have this in your CSS:

#sidebar .box {
	background: #eee;
	border: 1px solid #ccc;
	font-size: 11px;
}
.box {
	font-size: 12px;
}

As with the previous example, anything outside the sidebar that has the class name of "box" would have a font-size of 12px, while the two boxes inside the sidebar will have a font-size of 11px. However, there is a difference here with the background and borders.

In the previous example, every element with the class name of "box" would have a light gray background and a thin gray border, because it was simply targeted with .box. But in this last example, .box will only have a light gray background and thin gray border if it is inside the id of “sidebar“.

Coming up in the last part of “The Cascade in CSS” series:

We’ll compare the following and see which takes precedence:

  • tag
  • .class
  • tag.class
  • tag:pseudoclass
  • tag.class:pseudoclass

These last two will deal specifically with anchor links (a:link, a:visited, etc), although there are other pseudoclasses in CSS, as well.

Part 3 of 3: Tags, classes, pseudoclasses, etc.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.