Anyway, recently I was helping one of the content people here manage a CSS template in Wordpress, and it made me realize I could put some learnings here, just in case I don't use CSS and jQuery for a while and forget, or in this blog's mission as a possible instructional guide. (This blog entry is probably jack of all trades, master of none, not low level enough to be good for beginners, way too simple to be useful to a veteran, and not comprehensive enough to be a reference! Ah well.)
HTML elements will generally be identified for purposes of CSS styling by:
- the kind of element they are- often a CSS stylesheet will apply a look to all elements of a type
- a style slapped on to the element itself, e.g style="property:val;"
- the class you assign directly to them with class="someclass" (and while any element should only have one class tag, an element can have multiple classes, e.g. class="someclass someotherclass")
- a style applied to an element with a certain id ala id="my_unique_id"
- A combination of 3 and 1 where it's elements of a certain class name, but only elements of a certain type.
- A combination of 1 and 3, like where an element gets a style when it's inside another element of a certain class (for example all the divs inside a class'd containing div.)
So for each of these, you have a different way of selecting them in the style sheet:
To review, in a stylesheet (or block of CSS style) the format is:
So what's the selector for each of these cases?
- For all elements of a type, it's just the tag name, e.g div
- If you're doing inline styles, you don't need to worry about the selector!
- For class name, it's "." plus the name of the class, e.g. .someclass
- For an id, it's "#" plus the id of thelement, e.g. #my_unique_id
- For elements of a certain class AND of a certain type, you write the element type and then the classname, WITHOUT a space: e.g. div.someclass
- For elements of a certain type WITHIN an element of a certain class, you use spaces: e.g. .someWrapperClass div
- Finally, you can use commas when you want a block of style info to apply to different selectors, e.g.
There is an art and balancing act to choosing the right type of selectors. In my early days, I noticed how classnames could be very similar to keys in the Hash Maps I used in programming languages like Perl and Java, so I tended to use a lot of unique classnames. Also, I wasn't yet comfortable with selector type 6, there, and could barely understand the code I was looking at. (On the other hand, it is very possible to get over specific with your selector hierarchies there! If you're too specific about that stuff, than you can't reuse the styling because it only works when embedded in that particular setting)
Another rule of thumb is, if there are competing selector patterns, the more specific one tends to win, a style added via id is more specific than something applied to a whole class is more specific than something at the element level, so the "id" would win if there are conflicting CSS properties from different selector. (Of course if it's different CSS properties, they will be all applied, rather than having to fight it out.)
Also, I think people go a little nuts in avoiding inline styles; it violates the holy grail of "all beautification goes in the CSS file" but frankly trying to get a pure-content HTML page is a pipedream; and hell, that's what we have Content Management Systems for.) So if I need to nudge something a bit, and it's a style that is totally not reuasable, I might go ahead and style it inline. Sometimes it just makes more sense than making up an arbitrary key.
And that is how I cope with CSS selectors... I love, love, love that jQuery uses the same selector pattern. It makes like so much easier.
Also, as a "well duh" bit of advice to newbies: you probably NEED to have firebug on your system NOW if it's not there already. (It's also built into chrome, but I find Firebug a bit more deft) Being able to right click on an item and "Inspect Element" is a HUGE benefit, especially how it shows you what file the properties came from, as well as what other properties got ignored when there's one of those aforementioned conflicts. (The overridden property is indicated with a