Chapter 13 journal.html and journal.css with pseudo-classes

The information contained in this document covers what I mentioned in class about working with pseudo-classes to get the table to display correctly. These steps aren't required. They're here just in case you're interested in trying to format the journal.html file using pseudo-classes in the CSS instead of actual classes in the HTML.

To edit the journal.html code

  1. Open the journal.html file in your plain-text editor.
  2. Locate the Find and Replace option in your editor. In most editors, the keyboard shortcut is Ctrl+H (PC) or Command+H (Mac).
  3. In the Find box, type or copy-and-paste the following carefully: <tr class="cellcolor">
  4. In the Replace box, type or copy-and-paste the following carefully: <tr>

    Replace dialog box showing the Find what and Replace with options
  5. Click Replace to replace the first instance. One instance of <tr class="cellcolor"> should have become just <tr>.
  6. If the first replacement works without messing up any other code, click Replace All to finish the find-replace operation.
  7. Save your file.

To edit the journal.css code

  1. Open the journal.css file in your plain-text editor.
  2. Locate the .cellcolor rule, and use the CSS comment code to comment out the rule. The opening comment code is /* and the closing comment code is */. The opening comment code comes before the .cellcolor class, and the closing comment code comes after the closing brace that ends the rule.


  3. If you haven't done so already, type the tr:nth-child(odd) rule in your style sheet. If you have typed it already, make sure it's not commented out.
  4. After the tr:nth-child(odd) rule, type or carefully copy and paste the following rule, which fixes the anomalies created by the nested table and the rowspan, respectively:

    tr:nth-child(n+6), table table tr:nth-child(n) {
         background-color: #fff;
         }
    tr:nth-child(n+8){
         background-color: #fcba7a;
         }

  5. Save your file.
  6. Open your journal.html file in a web browser, and you should see the same result as what you created using the cellcolor class on the table rows.