Use HTML tag names, classes or IDs in CSS?

Question

In designing the HTML and CSS for a page, when should I use

img.className

versus

.clas

Answer 1

When to use what depends on what you want to select. img.className (type selector + class selector) selects only IMG elements that’s in the class “className” while .className (just class selector) selects any element that’s in that class and #idName (id selector) any element with the ID “idName”.

But besides that, the selector all have a differente specificity that affects the order in which the properties of that rules overwrite the one of others.

So if you have an IMG element with the ID “idName” that’s in the class “className”:

The properties of the rules would be applied in the following order (specificity from highest to lowest):

1. #idName
2. img.className
3. .className

But when you use a specific class only for one specific type of elements (e.g. “className” only for IMG element), you can go with only .className.