Most of you will be surprised by some of the CSS selectors that I’m writing about today. For instance, did you know can select a element based on a ending substring such as “.pdf”? BAM, add that selector to your a element and you can make all PDFs on your website italic and purple without any addition HTML! You xan do that with other substrings too!

We’re also going to go over some of the differences between more common selectors just so you know you’re efficiently implementing your code.

COMMONLY USED SELECTORS (like squirrels)

UNIVERSAL SELECTOR:

* {color:blue;}
This is applied to all elements unless it has a explicit selector already applied. The most common usage is probably those who are using it to reset values or apply universal values (duh!). For a quick fix — it might come in handy if you were doing a website demo and wanted to adjust all the font-sizes in your website by adding a font-size: 125% temporarily for the people in the back to see better.

TYPE SELECTOR:

body {background-color:blue;}
This is applied to to all matching elements. Whether it be a default or a custom Class or ID selector (see next), the match is found and the style is applied.

CUSTOM CLASS & ID SELECTORS:

.emergency {color:blue;}
#wrapper {background-color: blue;}

These are custom selectors that are formed by either using the dot notation or the hash mark preceding the name. The usage of these are basically Class for multiple instances and ID for single instances. You can target elements by directly adding them preceding the dot or hash marks.

p.sidebar {color:blue;}
p#content {color:blue;}


DESCENDANT SELECTOR:

body p {color:blue;}
This is applied to to all descended elements of another selector. So that means all children, grandchildren, great-grandchildren will have the style applied to them.

CHILD SELECTOR:

ul > li {color:blue;}
This is applied to only the children of the parent selector. This means you can target a specific depth of the element rather than have styles applied to the entire ancestry.

LESS COMMONLY USED SELECTORS (like red pandas)

ADJACENT SIBLING SELECTOR:

h2 + p {color:blue;}
This is applied to the adjacent sibling of another element. In other words, you might want to target an element that you know immediately follows another. For instance, in the middle of your web page content you have a text call-out with a h2 header. You can have all the instances of a p be styled differently to indicate that it’s a call-out with a background value. Also, this only applies to elements — so text in between the elements will be ignored. (This only works according to HTML document tree). See Eric Meyer’s Website for more on this…

SIMPLE ATTRIBUTE SELECTOR:

a[class] {color:blue}
This is applied to any element with a matching attribute. For instance, you want to apply a style on every link on the page with a class associated with it, even though they belong to different classes.

RARELY SEEN SELECTORS (like unicorns)

EXACT ATTRIBUTE SELECTOR:

a[rel="next"] {color:blue}
This is applied to only elements with the exact matching attribute. This could be useful if you’re trying to style specific attributes or even if you’re trying to style a group of obscure attributes like a set of rel and rev links. (They’re obscure to me because I don’t often use them! ha!)

PARTIAL ATTRIBUTE SELECTOR:

a[rel~="party"] {color:blue}
This can be applied to elements with space separated values. For instance it would work for class=”party” and class=”party august” but not class=”party-time”. So you can see it would be useful if you used these selectors to group a set of targets together by naming them a certain way.

BEGINNING SUBSTRING SELECTOR:

a[href^="/party"] {color:blue}
You can apply this selector to grab a element based on the beginning substring. This is useful if you want to style a set of elements that are grouped in a certain way like the beginning of a url for instance.

ENDING SUBSTRING SELECTOR:

a[href$="/document.pdf"] {color:blue}
You can apply this selector to grab a element based on the ending substring. This is a showstopper for sure! I think it’s good usability to alert users what type of file they are clicking on and this is a great way to consistently label files for your users visually (you still might want to include the file name or file type in the text but this helps them scan).

ARBITRARY SUBSTRING SELECTOR:

a[href*="typesett.com"] {color:blue}
You can apply this selector to grab a element based on any substring in the attribute. If you can find a pattern with an occurring substring on your page, you can exploit it to target only those same substrings.

LANGUAGE SUBSTRING SELECTOR:

body[lang|="en"] {color:blue}
This is used for selecting elements with a lang attribute. This is useful for differentiating content in different languages.

I’ve actually known this to be the “match or starts with” selector. Some people use it like this:
img[src|="party"] {border-color:blue}
and what it would do is find party.jpg or party56.jpg but not august/party.jpg.

Props to Jake Vance for the image!

Comment If You Have Anything To Add Or Correct!

Other Articles You Might Like:

CSS Rehab – 3 Step Program To Getting Clean
5 Innovative CSS Techniques You Should Know About

This entry was posted on Wednesday, September 16th, 2009 at 11:51 pm and is filed under CSS, Tips, Web Design, Web Dev. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.