Class vs. ID Selectors: A CSS Story

I’m surprised that there still a good number of web designers out there who are still in the dark on the proper use of CSS selectors, particularly the difference between “class” and “id” selectors.

I thought of a little children’s story to help beginning web designers understand the difference between the two:

Once upon a time, in the days when technology was still limited to simple tools, there was a man who lived beside a river. He made his living by catching fish. He considered the river blessed because there were different kinds of fishes swimming around– big, small, colorful, long, short, round, you name it.

One morning, his farmer friend asked him to catch him a big fish in exchange for sack of potatoes. The man went to his house and casted a fishing net on to the river. He was able to catch several big fishes and went to his farmer friend to showcase his catch.

“Sorry, my friend,” said the farmer. “I want something bigger.”

So, the man chose a different fishing net, one with loosely spaced knots and fibers. He was certain that bigger fishes would be caught.

He casted that fishing net to the river, and sure enough, he caught much bigger fishes. He went to his farmer friend and proudly flaunted his catch.

“Sorry, my friend,” said the farmer. “but I wanted the BIGGEST silver fish in your river.”

Frustrated, the man went back home. Instead of getting another net, he took his sharp spear and he went to the part of the river where the schools of silver fish swam. Once he saw the fish he thought was the biggest, he thrust his spear into the water and he got it.

He went to his farmer friend and the farmer was happy with the very big silvers fish. The man went home happy with his sack of potatoes.

In our story, the nets represent the Class selectors. Simply put, class selectors are used to define attributes of a general class of elements, regardless the element.

The spear represents the ID selector. ID selectors are used to specifically style a unique element, thus it implies that an ID selector should not be repeated in a page.