Introduction to CSS Selectors

by James Cook on January 14, 2011

Dominate Dreamweaver Video

Duration: 7:34 minutes.

I recently asked for suggestions for topics for videos and tutorials and received a lot of questions about CSS and specifically about how to use CSS selectors. So I'm making available this brief overview of the various kinds of CSS selectors and their uses. I hope you find it useful and, if you have questions, that you'll submit them as a comment using the form below.

If you'd like to submit topic for possible future videos or tutorials, please use my contact form.

If you enjoyed the information in this article, you may be interested in Dominate Dreamweaver. My 12-week online course which will take you from the basics of Dreamweaver through complex topics such as Spry menubars and on to building complete interactive websites. The cost for the course is $397 (or three payments of $149.99).

Click here for more information or use the button below to register now.


Andrew Smart January 14, 2011 at 8:21 am

The class when applied to a paragraph with an ID is not taking precedence its just writing an inline style using a span tag and writing inline style is not best practice.

jcook January 14, 2011 at 9:16 am

The class rule is applied to a span and that is perfectly acceptable CSS. It is not an inline style which is written directly in the html and is generally considered bad practice.

Here’s what my example looks like in the code:

<p id="red">This is a <span class="blue">paragraph</span>. </p>

An inline style looks like this:

<p id="red">This is a <span style="color: blue">paragraph</span>.</p>

However I was a bit unclear about why the .blue class takes precedent. Because the .blue class is applied to a span within the paragraph with id=red. The .blue rule is “closer” to the text and overrules the #red rule.

If a class is applied to an object and an id with a corresponding rule is applied within that object. The id rule would overwrite the class rule.

Also, if an id based rule and a class rule are applied to the same object, the id rule will take precedence.

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact