CSS

The difference between IDs and Classes in CSS

Cascading Style Sheet (CSS) styles are most commonly applied to elements (paragraphs, links, images, etc.) within a web page by one of two ways: either through ID selectors or class selectors. For example:

<div id="id-selector">style applied with ID<div>
<div class="class-selector">style applied with class<div>

When first learning to use CSS I think it can be confusing on when to use an ID and when to use a class as they seem on the surface to function identically. However, there is a fundamental difference, and an easy to remember one at that:

IDs may only appear once within a web page, while classes may appear multiple times.

Let’s take a closer look at the differences:

ID selector

  • Designated by a hash (#) preceding the style name.
    For example, #id-selector{font-size:12px;}.
  • Can only appear once within a web page.
    While this is not enforced by most, if not all, major web browsers it does not mean you should disregard this rule, as it potentially will cause problems if you decide to add JavaScript in the future. Your page will not pass validation by W3.org either.
  • Can only appear once within an element on a web page.
    For example, <div id="id-selector">.
  • Takes precedence over styles applied with a class.
    Web page elements can have a mix of ID and class supplied styles, for example, <div id="id-selector" class="class-selector">, however the styles declared in the ID selector will always take precedence over any conflicting styles declared in the class selector, unless the !important declaration follows the style declaration in the class. For example,
    #class-selector{font-size:18px !important;}.
  • Is used by JavaScript to gain access to an element.
    Using the getElementById method allows elements on a page to be accessed and manipulated via JavaScript.
  • Allows the browser to scroll to a particular element on the page if the ID name is appended to the end of the URL.
    For example, http://www.somedomain.com/yourpage.html#id-selector.

Class selector

  • Designated by a period (.) preceding the style name.
    For example, .class-selector{font-size:12px;}.
  • Can appear more than once within a web page.
    Unlike IDs, which should only appear once, classes can be applied to multiple elements on a web page.
  • Can appear more than once within an element on a web page.
    Providing a space separated list of class selectors within the class attribute of an HTML element allows multiple class styles to be applied at once. For example,
    <div class="class-selector another-class-selector">.

The following is a short example demonstrating all the above rules I have listed for ID and class selectors:

<style type="text/css">
 
#page-content
{
	width:300px;
	margin:10px;
	padding:10px;
	border:1px solid #00ff00;
	font-size:11px;
}
 
.page-element
{
	border:1px solid #ff0000;
}
 
.augmented-element
{
	border-top:none !important;
	border-bottom:none;
}
 
</style>
 
<div id="page-content" class="augmented-element">
	<div class="page-element">First</div>
	<div class="page-element augmented-element">Second</div>
	<div class="page-element">Third</div>	
</div>

Viewing this code in a web browser should render the following:

First
Second
Third