“If you have several entries named “.rightsidebar” in your style sheet, how would the browser know which one you are referring to?”

By using what is called specificty in your “entries” (called selectors). Lets say you have 4 variations of a right hand side bar, (short, tall, blue and green) you have a few options to add specificity here. One way would be to use additional classes next to this “.rightsidebar” class like so:

<div class=”rightsidebar tall”></div>
<div class=”rightsidebar short”></div>
<div class=”rightsidebar blue”></div>
<div class=”rightsidebar green”></div>

and the css would be:

.rightsidebar {
border:1px solid #000;
margin:15px;
padding:15px;
width:200px;
}
.rightsidebar.tall { height:400px; }
.rightsidebar.short { height:100px; }
.rightsidebar.blue { background:#000099; }
.rightsidebar.green { background:#00ff00; }

See how we have the .rightsidebar that has repeated styles then we use another class to add specificity to our selectors. Another method of adding specificity to a selector is to first select a unique parent and use it’s id or class in our selector.

<div id=”primary”>
<div class=”rightsidebar”></div>
</div>

<div id=”secondary”>
<div class=”rightsidebar”></div>
</div>

<div id=”tertiary”>
<div class=”rightsidebar”></div>
</div>

<div id=”footer”>
<div class=”rightsidebar”></div>
</div>

.rightsidebar {
border:1px solid #000;
margin:15px;
padding:15px;
width:200px;
}

#primary .rightsidebar { height:400px; }
#secondary .rightsidebar { height:100px; }
#tertiary .rightsidebar { background:#000099; }
#footer .rightsidebar { background:#00ff00; }

So here we used parent element’s ids in our selectors to add specificity between the different variations of a “.rightsidebar” classed element. Please be sure to understand that these two examples is just showing you one of many MANY ways to add specificity to your selectors.

“Is it that each id can have a class *related* to it and it doesn’t matter if two unique id’s both have related classes with the same name?”

Um, I swear I’m not trying to make this confusing but, this last question is both yes and no. I think the best way for me to attempt to make it a little more clear is to show you:

<div id=”primary rightsidebar”></div> = not valid, you can’t have two id values in one attribute.

<div id=”primary”></div> = is valid.

<div id=”primary” class=”primary”></div> = is valid, but kinda silly and not necessary.

<div id=”primary” class=”rightsidebar”></div> = is valid.

<div id=”primary” class=”rightsidebar blue”></div> = is valid.

<div id=”primary”>
<div id=”primary” class=”rightsidebar”></div>
</div> = is not valid, only one unique “primary” id value per document.

<div class=”inner”>
<div class=”inner”></div>
</div> = is valid, you can have repeating class values per document.

So there are many combinations of class and id attributes you can use, but one contant remains, id values are unique per document and classes are not. Here are some combinations of valid and not valid selectors.

#primary.rightsidebar {} = valid
#primary .rightsidebar {} = valid
.rightsidebar#primary {} = valid
.rightsidebar #primary {} = valid
.rightsidebar .rightsidebar = valid
#primary.rightsidebar #primary = not valid
#primary .rightsidebar #primary = not valid

I hope this helps.

Still strugling sorry…

If you have several entries named “.rightsidebar” in your style sheet, how would the browser know which one you are referring to?

Is it that each id can have a class *related* to it and it doesn’t matter if two unique id’s both have related classes with the same name?

S

Classes however do not need to have unique values across different elements to a single document. Say our three divs now have classes, each element could have the same class value if you desired and the document would be valid.

Other than the document not being valid anymore, about the worst thing that will happen with having repeated id values is that anyone who reads your code will assume you had no idea what you were doing.

I hope this clears it up for you. ids must have unique VALUES from one another on a single document, classes can have repeating VALUES to a single document.

Your tutorials are excellent, thank you :-)

I think the penny is slowly dropping for me as regards CSS but I still have some fundamental issues…

You say:

id=”” (is for unique elements to and single html document)

class=”” (is for non unique elements to and single html document)

I don’t understand what is to stop you using one or the other repeatedly in any given scenario…?

What would go wrong if you did use “id=” repeatedly throughout a document?

Thanks again for your help :-)

S

It Really Good Site For Basics!
Thanks u Sir

Thanks a Lot for your Tutorial!