CSS Selectors
The Basics
When working with CSS and HTML there are so many ways to organize your work, and if you haven't found out already, organization is a key part of working with CSS and HTML.
You remember that CSS stands for "Cascading Style Sheets", right? And you know that bits of css need HTML elements to be able to point to in order apply style, yeah?
So, you're pointing to various elements in your Cascading Style Sheet. Cascading, in theory, means a couple of different things:
1) The styles on the bottom will override the styles on the top
2) You can be general, or specific with how you point your styles to elements.
That's where selectors come in!
There are Two Types of Selectors
(that I know of)
ID Selectors
ID Selectors are denoted in HTML with the following syntax:
<p><pre> <element ID = "AWESOME"> </pre></p>
In CSS you call upon an ID Selector to point to with the following syntax:
<p><pre>#AWESOME {
}</code></pre></p>
ID Selectors are each unique. In terms of your HTML, this means that THERE CAN BE ONLY ONE id selector of each name. They are only effective if they are once. Not more.
However, in CSS, you can call upon each unique ID selector as many times as you wish.
ID Selectors hold great power. And, as we all know, with great power, comes great responsibility.
ID Selectors are like the name a starship carries. For, example, within one universe and time period, there is only one U.S.S. Enterprise D. Just like, in one HTML page, there can be only one <element ID = "AWESOME">.
Class Selectors
Class selectors are denoted in HTML with the following syntax:
<pre><code><element class = "AWESOME"></code></pre>
In CSS, you call upin a class selector to point to with the following syntax:
<pre><code>.AWESOME {
}</code></pre>
Class selectors are **not** unique. You can throw as many class selectors of one name into a page as you want to, AND you can call on all of them at the same time! Class selectors are flexible. And while it's not a dorky quote, with great flexibility comes great power.
Class Selectors are like the make of the starship. There is only one U.S.S. Enterprise D in our universe at one time, but there are probably a TON of Galaxy Class Starships!
A More Accessible Metaphor
So you're not into star trek? Or navy at all? That's fine, take a bite out of this metaphor:
If you, like my cousin and his fiance, are a **four dog family**, then you have many dogs. And a couple cats. And, like, a gerbil. He's always loved having the zoo at home. So, here's how you express **dogs** in your home in HTML:
<pre><code><div class = "dog"> Pitbull </div> <div class = "dog"> Pitbull </div> <div class = "dog"> Mutt </div> <div class = "dog"> Mutt </div></code></pre>
Here's how you express dogs in your home in CSS:
<pre><code>.dog {
take: a bath; }</code></pre>
Now, say Pi was a good dog, and didn't play in the mud with the other three. Well, he doesn't need a bath. So you might express your HTML like so:
<pre><code><div ID = "Pi" class = "dog"> Pitbull </div> <div ID = "Carmen" class = "dog"> Pitbull </div> <div ID = "Rory" class = "dog"> Mutt </div> <div ID = "Billy" class = "dog"> Mutt</div></code></pre>
And here's what your CSS might looks like:
<pre><code>#Pi {
take: a walk; }
.dog { take: a bath; }</code></pre>
Please note that the ID selector overrides the isntructions from the class selector, even though the class selector comes second.
That's where the theory behind cascading fails us: it doesn't apply to ID Selectors.
What Now?
This Guy doesn't recommend using ID selectors often or at all. I have to say, I agree with him. With HTML5, and the advent of more specific element containers, they aren't needed quite as often. And if you use them less often, they are less likely to get all tangled up in you CSS, messing up the cascade. Leaving them out, or using them sparsely makes your code easier to keep track of.
Here is a fantastic resource regarding the nature of specificity (selectors, eg) and inheritance (the cascade, eg) if you want to dig deeper into it.
And, here is a really fantastic article that introduces the concept of "Oject Oriented CSS" for anyone who thinks of themselves either as more advanced, or who just really like object oriented code. I really love some of the strategies in this article. Do take a peek.