Time for action – using pseudo-classes to zebra stripe a table
Let’s set up the markup for our HTML table – it’ll have three columns and six rows listing my favorite movies in order.
Pseudo-class example HTML table markup:
<body>
<table width="100%" cellpadding="1" cellspacing="0">
<!-- column headings -->
<tr>
<th>Rank</th>
<th>Movie</th>
<th>Genre</th>
</tr>
<tr>
<td>1</td>
<td>The Matrix</td>
<td>Action</td>
</tr>
<tr>
<td>2</td>
<td>Die Hard</td>
<td>Action</td>
</tr>
<tr>
<td>3</td>
<td>The Dark Knight</td>
<td>Action</td>
</tr>
<tr>
<td>4</td>
<td>Friday</td>
<td>Comedy</td>
</tr>
<tr>
<td>5</td>
<td>Love Actually</td>
<td>Drama</td>
</tr>
</table>
</body>
Our HTML table should look like this:
- To color even rows with a light gray color, write this line of code (again, we use the .setStyle() method):
$$('table tr:even').setStyle( 'background-color', '#ebebeb' ); - Save your work. View your document in a web browser. You should see something like this:
- Now we’re going to style the odd rows. This time, instead of .setStyle(), we’re going to use the .setStyles() method so that we can supply more than one CSS property/CSS property value pair to be implemented. Here’s the code to accomplish what we set out to do (which you can place right below the code in step 1):
$$('table tr:odd').setStyles( {
'background-color' : '#252525',
'color' : '#ffffff'
} ); - Save your work and view your work in a web browser. Your HTML table that contains my favorite movies of all time should now looks like this:
What just happened?
We just learned one of the many ways where pseudo-class selectors are helpful. In this case, we took a regular HTML table and zebra striped it so that we have different styles at alternating rows.
To zebra stripe our HTML table, we used the :even and :odd pseudo-class selectors to change the background color of even row with a light gray color (#ebebeb in hexadecimal) and all odd rows of our tables with a dark gray background (#252525) with a white foreground color (#ffffff).
A couple of notes on the :odd and :even pseudo-class selectors
The :odd and :even pseudo-classes aren’t available in W3C specifications; although the concept of using them is the same, they are custom MooTools pseudo-class selectors.
Secondly, the index of each one starts at 0. Because of this, using :even would select the first element (index 0) and third child elements because their index is actually 0 and 2, respectively. So they’re kind of switched around in the conventional sense of odd and even.
Other Pseudo-class selectors
There are nine MooTools pseudo-class selectors as of version 1.2:
|
Pseudo-class Selector |
Description |
|
:contains |
Matches elements that contain a particular text string. For example, matching all <div>’s with the text “I love MooTools” is $$(‘div:contains(I love MooTools)’) |
|
:empty |
Matches elements that don’t contain anything. For example, $$(div:empty) would match this: <div></div> |
|
:enabled |
Matches elements that are enabled. Usually used in <input> tags. |
|
:even |
Matches all child elements that have an even index. For example, if there are four paragraphs, using $$(‘p:even’) would select the first and third paragraphs (remember that the index starts at 0). |
|
:first-child |
Matches the first child element (i.e. the child with an index of 0). For example, if there are four paragraphs in a <div> element, using $$(‘div p:first-child’) would select the first paragraph inside the <div> element. |
|
:last-child |
Matches the last child element (i.e. the child with the highest index). For example, if there are four paragraphs in a <div> element, using $$(‘div p:last-child’) will select the fourth paragraph inside the <div> element. |
|
:not |
Matches elements that do not match a particular selector. For example, matching all paragraphs that do not have the class .intro would be $$(‘p:not(.intro)’). |
|
:nth-child |
Matches the nth expression child element. You can use mathematical expressions. For example, $$(‘div:nth-child(3n+1)’) would select the first div (3(0)+1 = index 0 position), 4th div (3(1)+1 = index 4 position)… 3(n)+1 index position. You can also use, as an argument: even, odd, first, and last as in div:nth-child(even) which is exactly like the :even pseudo-class selector. |
|
:odd |
Matches all child elements with an odd index. For example, If there are four paragraphs, using $$(‘p:odd’) would select the second paragraph and fourth paragraph (index 1 position and index 3 position). |
|
:only-child |
Matches all elements that are the only children of the only child element. For example, $$(p:only-child) would match the paragraph <div><p>only child></p></div> but will not match these paragraphs <div>><p>not an only child></p>><p>not only child></p></div> because it has a sibling paragraph. |
Working with attribute selectors
If you thought MooTools can’t get any cooler with element selection – well, it gets much better. MooTools also implements CSS3’s Attribute Selectors. An Attribute Selector allows you to select elements based on their CSS attributes, also commonly referred to as properties in MooTools.
For example, an <input> tag’s type is considered one of its attributes (or properties), so is its class
<input type=”text” name=”query” value=”” />
In MooTools (as well as CSS3), the syntax for an attribute selector is as follows:
element[attribute=attribute value]
For example, if we wanted to select all <input> elements with a type of text, we would write:
$$('input[type=text]');
Attribute selector operators
Attribute selectors can match attribute values various ways using Attribute selector operators. The following table depicts a list and description of each attribute selector operator.
|
Operator |
Description |
|
= |
Matches attribute value exactly and literally. For example, $$(‘a[class=myLinkClass]’) will match all <a> elements with the class of myLinkClass. |
|
!= |
Matches all elements with the attribute value that is not the value given. For example, $$(‘a[class!=myLinkClass]’) will select all <a> elements that doesn’t have the class of myLinkClass. |
|
^= |
Matches all elements with attribute value that starts with the value given. For example, $$(‘img[src^=big]’) will match all images with the src attribute value the begins with the word big, such as big-picture.png or biggiesmalls.jpg. |
|
$= |
Matches all elements with the attribute value that ends with the value given. For example, $$(‘img[src$=.jpg]’) will select all images that end with .jpg – useful in selecting particular file extensions. |
Attribute Selector example: styling different types of links
Often, you want to indicate to a user what a particular type of link is. For example, you may want to indicate to the user that a particular link goes to another website or that a link is a mailto: link that will open up their default email client. Perhaps, you want to highlight all links that point to a particular domain name like sixrevisions.com.
