1. More classes

So you’ve mastered classes? But did you know you can use more than one class per element?

<p class='first big'>text</p>

This way, the CSS rules for both ‘first’ and ‘big will apply to this paragraph. If any rules overlap the one that’s closests to the bottom in the css will prevail.

2. Descendant selector

HTML is a tree structure or DOM document, and as such an element can have children. CSS uses this fact by giving the ability to style the decendant of a specific element.

<div><p>Text</p></div>

div p {
  background-color: green;
}

This rule only applies to paragraphs that are in a div, but not nessecary directly. If there is a table in the div, and in there a paragraph this rule will still apply.

3. Child selectors

The previous tip shows how to style all descending paragraphs in a div. But what if you only want to style direct children? That’s where you use child selectors.

<div><p>Text</p></div>

div > p {
  background-color: green;
}

Unfortunately IE doesn’t support this, the good thing is so don’t trust on it blindly.

4. First child pseudo class

You might want to style the first paragaph in your content div differently. You could add a class to every first paragraph. But CSS also has it’s own pseudo class which can do this for you.

div > p:first-child {
  background-color: green;
}

5. Pseudo elements

Another not frequently used css property, the pseudo elements. :first-line, :first-letter and :before and :after

body:after {
    content: "The End";
}

This writes “The End” just before the </body>, so after it’s contents.

Related posts

No related posts.

This entry was posted on Monday, January 2nd, 2006 at 10:36 by Sonja Duijvesteijn and is filed under Webdevelopment, CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.