CSS Selectors and Pseudo Selectors

How you define your selectors will often directly effect how your page looks. Sometimes, you want a certain type of look, but only on some elements. You can use complicated classes, specific to only certain cases, or you can style your rules easier if necessary.

We'll be using this base file for our examples. It has a containing div with an id called "content" to center the text. There are several paragraphs as well.

Pseudo Selectors

Pseudo Selectors allow you to specify tags in certain cases, but not all. They can be powerful, but don't always work in all browsers. Consider these links, and always test.

Standard pseudo selectors are used with links such as :hover, :link, :active, and :visited. They further define the link based upon what the user has done with the link. There are several other pseudo selectors which can be very beneficial if you know how to use them.

:first-child

Lets say you want to display the opening paragraph of your page in a larger font than all the other paragraphs. Like is sometimes done in online news papers. Any time you want the first to have a special set of rules, you can use it's parent, then specify ":first-child".

example: #content p:first-child {} - first child sample link - notice how all other paragraphs look normal.

Please note that this does not show in Dreamweaver, but it does in Live View.

:last-child

This allows you to set the style of the last child of an element. This is a CSS3 selector, so it has very limited support at this time.

example #content p:last-child {} - last child sample link

:first-line / :first-letter

These allow you to define the first line, or first letter. Think of the old story books where the first letter is completely different looking. This will do it for the first line/letter of every element however. So keep this in mind.

example: p:first-letter {} - first letter sample link

If you want it to be truly the first letter, consider combining pseudo selectors like so:

example: #content p:first-child:first-letter {} first letter second sample link

:focus

When you want to make sure your user know where they are, especially in a form field, you can use the focus pseudo selector.

example input:focus {} focus sample link

Advanced CSS Selectors/Selections

Most people are familiar with selectors like ul li, or ul li li, but what about ul > li, and some others with "funky" symbols? Let's look at those and see what we get.

Descendant (standard)

This is what we are used to seeing, something like ul li {}. This is all list items (li)elements under an unordered list (ul).The problem is that it grabs a lot of elements, that I may or may not need. Especially true when nesting elements such as sub-lists, or divs within divs.

Child Combinator

This issues the greater than symbol ">" to specify that the second element must be a child of first element.

Consider: ul > li { color: #009; } for the sample page with a nested ol under a ul.

Adjacent Sibling

Uses the plus "+" symbol to define elements directly after an element. The problem is that this can be an issue if you have lots of paragraphs following paragraphs, or list items, following list items.

What CSS Selector/Rule Gets Applied to What Element

One of the real challenges is trying to figure out what rule applies to which element.