ulyssesonline.com

When I first learned CSS, the biggest challenge for me was learning the difference between “ID” and “CLASS” selectors. I struggled with the concept until I learned that “ID” selectors are unique and can only be used once in a page layout. On the other hand, “CLASS” selectors can occur multiple times in a single page layout. A good example of using the “CLASS” selector is using it for posts or articles which can occur many times in a single page. See some examples below.

ID Selectors

ID selectors are unique. They occur only once in a page layout. A good use for an ID selector are headers, footers, menus, sidebars, etc. Remember, it’s must be unique and can NOT be repeated in a page.

Apply CSS to ID selectors by using the # pound sign. I associate “ID” selectors to an ID Card or a Drivers License which contains a unique number. Therefore IDs have unique numbers and uses the # pound sign.

CLASS selectors

CLASS selectors on the other hand, occur multiple times in a page such as divs for posts, articles, etc.

Apply CSS to CLASS selectors by using the . period sign. I associate CLASS selectors to a “class period” like in a school enviroment — a class period. The CSS code under .post in this case will apply to every instance of the CLASS selector.

I hope this short article clears up some of the confusion between ID and CLASSES for first time CSS coders. I hope it gives you a much clearer picture as to which selectors to use when designing your next page layout.

(3 votes, average: 4.33 out of 5)

 Loading ...