CSS Selectors

Cascading Style Sheets (CSS) are used to style html documents. A CSS statement has two parts: a selector, which specifies the part of the document, and declarations, which describes the formatting to apply. A typical piece of CSS looks like this:

typical-css

The key to CSS is understanding how selectors work. The table summarises the main selectors in CSS 2.1.

CSS 2.1 Selectors
Selector Example Explanation
Type li
{ color:blue; }
Matches all the “li” elements.
Class .intro
{ color:red; }
Matches all elements with the “intro” class attribute.
ID #nav
{ color:blue; }
Matches the single element with the id “nav”.
Decendent div p
{ colour:green; }
Matches all elements “p” which are contained within a “div”. The “p” does not have a direct descendent.
Universal *
{
margin: 0;
padding: 0;
}
Matches all elements.
Child div > em
{ color: blue; }
Matches all “em” which are a direct descendent of a “div”. (Not IE6)
Adjacent h1 + h3
{ margin: -20px; }
Matches “h3” which immediately follow an “h1”. (Not IE6)
Attribute img[src]
{ margin: 0; }
Matches all “img” elements whose “src” attribute is set. (Not IE6)
Attribute img[src=”small.gif”]
{ margin: 0; }
Matches all “img” elements which contain an attribute src=”small.gif”. (Not IE6)
Pseudo p:first-letter
{
font-weight: bold;
}
Style information not available in the document tree.
:first-letter
:first-line
:first-child
:link
:visited
:hover
:active
:focus
Not IE6:
:before
:after

An ID can only be used once within a document, whereas a class can be used multiple times. In the style sheet the ID selector has greater weight than class selector. ID’s are generally used to identify the top level containers on the page, classes are then used to identify the lower level containers. Asp.net has a problem with ID’s, it tends to mangle the id attribute for elements with runat=”server”. For these elements you have to stick with the class attribute, which asp.net leaves alone.

Selectors can be grouped as a comma-separated list, if they share the same declaration block. For example:

grouped-selector-css

With grouped decent selectors, you need to be careful that you repeat the whole decent. For example #sidebar h2, h3 will select the h2 elements in the sidebar, plus the h3 elements in the whole document.

I’m embarrassed to admit that I learnt my basic CSS from Sams Teach Yourself CSS in 10 Minutes by Russ Weakly. But hey, honesty is the best course, and its actually an OK book.

2 thoughts on “CSS Selectors

  1. Greate post. Keep posting such kind of info
    on your site. Im really impressed by your blog.
    Hello there, You have done a great job. I’ll definitely digg it and in my
    opinion recommend to my friends. I’m confident they will be benefited from this site.

  2. Pretty! This was an incredibly wonderful article. Many thanks for providing this info.

    Feel free to surf to my blog post :: electric cigarette brnd reviews (Doug)

Leave a Reply

Your email address will not be published. Required fields are marked *