Tuesday, March 2, 2010

CSS Selectors: Real world examples

1. BBC News Headline

Website: http://news.bbc.co.uk/
CSS Selector: A.tsh,A.tshsplash

2. Price of an Amazon.com item

Example 1: http://www.amazon.com/Toshiba-Satellite-L505-GS5037-TruBrite-15-6-Inch/dp/B0030INLSW/ref=dp_ob_title_ce?ie=UTF8&qid=1267628403&sr=1-2
Example 2: http://www.amazon.com/Kindle-Wireless-Reading-Display-Generation/dp/B0015T963C/ref=dp_ob_title_def
CSS Selector:B.priceLarge

3. Item count of an eBay auction search for "ferrari"

Website: http://motors.shop.ebay.co.uk/Cars-/9801/i.html?_nkw=ferrari&_catref=1&_fln=1&_trksid=p3286.c0.m282
CSS Selector:SPAN.countClass

CSS Selectors: Cheat Sheet

'Class' selectors

.headline - select every element that has the 'headline' class.

'Tag' selectors

p - select every paragraph on the page.
a - select every link/anchor on the page.
h1 - select every Heading 1 tag on the page.

'Id' selectors

#item-price - select the element that has the 'id' "item-price".

'Nth element' selectors

p:eq(0) - select only the first paragraph.
a:eq(4) - select the fifth 'anchor' tag on the page.
.menu-item:eq(3) - select only the forth element that contains the 'menu-item' class.

Combined selectors

h1, p - select every h1 tag AND every paragraph tag.
h3.subtitle - select every h3 tag that contains a 'subtitle' class.
h3:eq(0), a.news-link - select the first h3 tag AND every anchor tag that has the 'news-link' class.

CSS Selectors: The Basics

This post will demonstrate ways to use 'CSS Selectors' (http://www.w3.org/TR/CSS2/selector.html) to target parts of a webpage that you wish to track.

There are three basic ways of identifying parts of a webpage using css selectors:

1. Element 'Tag'
2. Element 'ID'
3. Element 'Class'

Let's give a quick practical example of each of three ways of identifying content:

1. 'Tag' - a tag is the name given to the type of structural element. For example in a typical webpage 'normal' text is often placed with 'paragraph' tags like this:

<p>This is the first paragraph</p>
<p>This is the second paragraph</p>

If we wanted to select all of the paragraphs in a webpage, our 'CSS Selector' would simply be p.

?? other examples of tag selection

2. 'ID' - Every structural tag in a webpage can have defined an optional 'id' attribute. Within a single webpage no two elements should have the same 'id'. Therefore an 'id' should point directly to a single element somewhere in the page.  For example

<p>here is a paragraph of text<p>
<p id="error-message">This is an error message!</p>

If we just want to extract the error message our selector would simply be #error-message. The '#' symbol is important and tells Femtoo that we are looking for an id.

3. 'Class' - Every webpage tag can contain a 'class'. Actually, they can contain as many classes as you want. Here is an example of how classes might be used in a navigation menu in a webpage:

<ul id="menu">
<li class="menu-item"><a href="#">Products</a></li>
<li class="menu-item selected"><a href="#">Services</a></li>
<li class="menu-item"><a href="#">Contact Us</a></li>

...well sort of... actually using .selected might not be specific enough - this means that we would end up selecting the content of every single element on the page that contains a 'selected' class. In our example, a better selector might be: .menu-item.selected - which means retrieve all elements that contain both the 'selected' class and the 'menu-item' class. Actually, we can be even more specific with #menu .menu-item.selected. By using the #menu selector we are ensuring that we will not accidentally select other items in the page that also have the classes 'menu-item' and 'selected'