Idiot Banter

CSS Selectors

Posted By:

Matt

Posted On:

October 24th, 2007

Posted In:

CSS & XHTML, Tutorials

Comments:

No Comments, Start The Conversation

Now that you know the basics of CSS we’re gonna get into some of the different ways you can select HTML elements.

Selecting Elements Directly (Type Selectors)

You can use CSS to select elements directly. If you want to target all <p> tags your selector will just be p, like this:


p {
font-size: 12px;
}


This will give all <p> tags a font size of 12px.

Selecting Classes and IDs

If you don’t want to select all <p> tags you can give one or some of the <p> tags classes, <p class="SoCool">. You can use the above selector to give all <p> tags a font size of 12px and then you can use the class to select only the <p> tags with the class of “SoCool” and make them pink (pink is cool).


p {
font-size: 12px;
}

p.SoCool {
color: pink;
}


The dot between the p and SoCool means “with a class of”. So all <p> tags with a class of SoCool will be pink. IDs work the same way but instead of a dot you use a hash (#). Let’s pretend SoCool was an ID instead of a class:


p {
font-size: 12px;
}

p#SoCool {
color: pink;
}


Just remember, you can only use an ID once on a page so if you need more than one <p> tag to be an awesome shade of pink, use a class instead of an ID.

Descendant Selectors

You can select HTML elements based on the HTML elements they are inside. If you want to target every <p> tag that’s in a <div class="SoUnCool"> your CSS would look like this:


div.SoUnCool p {
font-size: 10px;
}


The CSS above says “All <p> tags inside a <div> with a class of “SoUnCool” should have a font size of 12px.”. You can get very specific with CSS selectors:


html body div#SoCool div.SoUnCool p {
font-size: 10px;
}


I’ll get into why you’d want to be more specific or less specific in a different article.

Child Selectors

You can select elements based on their parent elements.


div > p {
font-size: 10px;
}


This says that any <p> tag that is directly inside a <div> should have a font size of 10px.

The Difference Between Descendant and Child Selectors

The difference between parent selectors and descendant selectors is slight but important. Parent selectors select only those elements that are directly inside them, Descendant selectors select all elements inside a specific element. Here’s an example:


<div>
  <p>The first paragraph.</p>
  <span>
    <p>The second paragraph.</p>
  </span>
</div>


With a child selector like this div > p, you would select only the first paragraph because it is a direct child of the <div>. The second paragraph is not a direct child so it would remain untouched. With a descendant selector like this div p you would select both the first and second paragraphs as they are both inside the <div>. The descendant selector doesn’t care how far inside the <div> the paragraphs are, the child selector will only go down one level.

Adjacent Sibling Selectors

The final selector is probably the least used selector (in my opinion) but it can be very useful in certain situations. The sibling selector selects elements that are directly beside each other.


h2 + p {
margin-top: 0;
}


This says that any <p> tag that directly follows an <h2> tag should have no top margin. If you have a bunch of <p> tags following an <h2> tag only the first <p> tag will be changed.

Conclusion

Now you know about the different types of selectors available in CSS 2.1 that work in all major browsers. As you gain more CSS experience knowing which selector to use when will become easier and you’ll be a pro, almost.

Similar Posts:

• CSS Specificity
• Using Multiple CSS Classes
• CSS: The Cascade