Page 1 of 1

Introduction to ID and Class selectors Rate Topic: ***** 1 Votes

#1 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Posted 27 February 2013 - 04:32 PM

In this article I am going to discuss the differences between the class and ID selectors in CSS. I am sure anyone who uses HTML/CSS knows that you can reference blocks of code in a style sheet using either selector. The points I want to discuss is when each should be used, and how.

ID
Simply put, an ID can only be used once per page. Well, it could technically be used multiple times; however the page would not pass validation. Since validation is very important to the web designer/front end developer, it is essential to strive for this standard. Keep in mind when naming ID's there are 3 requirements:
  • Must contain at least one character
  • Must not contain space characters
  • In HTML, all values are case-sensitive


The id attribute can be used in a few ways. The most common method of utilizing this tag is inside a <div> element. Using the attribute in this way allows you to write css that will manipulate the characteristics of said div. Take a look at the code below, note that all id's start with the hash #.

html
<div id="wrapper"> </div>


css
#wrapper { width: 1000px; margin: 0; }


Those familiar with html/css already knows what this markup achieves. Those unfamiliar, the explanation is simple. The id attribute in the div element, directs the browser to the #wrapper section of the css style sheet. It then interprets the enclosed block of code to style the element.

Since ID's are unique, it is not possible to do the following:

html
<div id="wrapper">
	<div id="wrapper">
	</div>
</div>


Again I say not possible yet it is. What would happen is two elements would be created with the same reference to the #wrapper block in the css style sheet. The wrapper would be a child of itself and down the road into development, it could come back to cause some very funky and undesired results.
Another reason for unique ids is that you can target an element using it's id in the url address of a site. For instance if there were a <div> element with an id of "main" at Google, I could type www.google.com/#main into my browser address bar, and the browser will attempt to load the page and scroll to the element "main." In short if there are multiple elements with the same id, the browser won't know up from down.

When should id be used?
ID should be used whenever css styling is needed. If a list was to be created for instance, and only the default style is desired, then no id attribute is required. Another important question is what elements can use the id attribute? It's actually easier to specify which elements can not use the attribute than it is to identify the ones that can. The elements unable to use id are:
  • base
  • head
  • html
  • meta
  • script
  • style
  • title


Class
The class is quite the opposite of ID. Classes are intended to be used multiple times and are not unique. Elements can even use multiple classes, separated by a space. Class is very helpful when styling pages and can be used in conjunction with id to make the developers life much easier.

Here is an example where class should be used:

html
#div1 { 
	width: 100px;
	height: 50px;
	box-shadow: 10px 10px 5px #888888;
	}
#div2 {
	width: 300px;
	height: 20px;
	box-shadow: 10px 10px 5px #888888;
	}
#div3 { 
	width: 200px;
	height: 70px;
	box-shadow: 10px 10px 5px #888888;
	}
#div4 {
	width: 150px;
	height: 60px;
	box-shadow: 10px 10px 5px #888888;
	}


The commonality to these four div's is the box-shadow attribute. This can easily be placed in a class to consolidate and organize your code. Note that all classes start with the period.

css
.shadow {
	box-shadow: 10px 10px 5px #88888;
	}


After you create the class you simply add it to the div elements in the HTML.

html
<div id="div1" class="shadow"></div>
<div id="div2" class="shadow"></div>
<div id="div3" class="shadow"></div>
<div id="div4" class="shadow"></div>


Since multiple classes can be used, I'll add another simple class for demonstrative purposes.

css
.border {
	border: 2px solid #333;
	}


html
<div id="div1" class="shadow border"></div>
<div id="div2" class="shadow border"></div>
<div id="div3" class="shadow border"></div>
<div id="div4" class="shadow border"></div> 


Now all the div's will have a box shadow and border.

Now that the differences between id and class have been discussed it is important to cover a few more things about css selectors. A very important and sometimes overlooked aspect to selectors is their use for nested elements. Take for example this h1 element that is nested inside a div.

html
<div id="wrapper" class="border">
	<h1>Dream-In-Code</h1>
</div>


Now to alter the styling of the <h1> element inside the div without affecting the rest of the page's <h1> elements:

css
#wrapper h1 {
	font-size: 1em;
	}


Notice the space between the div id and the h1 element. Now say I want to change the font size of only the <p> and <h2> elements on a page. To achieve this I make use of the comma.

css
p, h2 {
	font-size: 1em;
	}


The comma in between elements tells the browser to select all p and h2 elements on the entire page, where as the space only selects elements that are nested in the parent element.

Lastly, I will cover a selector which escapes some developers.


#wrapper.border
#wrapper .border


There is a difference between these two selectors. The second one can only be used by nested elements inside the wrapper. The first one can only be used by the element that has both the id wrapper and the class border.

<div id="wrapper" class="border"></div> <!-- The first one -->

<div id="wrapper">
	<div class="border"></div>      <!-- The Second one -->
</div>


This is very handy, especially for responsive framework (I won't get into that in this article). This method can allow you to create combinations of classes for use by elements. Take for example a layout that has three divs in a row and as a developer you to make two of them red, and the middle one black.

css
.box {
	width: 100px;
	height: 100px;
	background-color: #000;
}
.box.red {
	background-color: red;
	}


html
<div class="box red"></div>
<div class="box"></div>
<div class="box red"></div>


Now, this isn't a terribly useful way to use this selector, but for lack of creativity during this writing it will have to do.

That should at least get those who are unfamiliar with the proper uses of selectors started. Thank you for reading and I hope you learned a thing or two.


Is This A Good Question/Topic? 1
  • +

Page 1 of 1