Using CSS Even and Odd Rules for Create Engaging Tables in WordPress

Cascading Stylesheets (CSS) empower you to create some amazing effects, especially if you hold relevant expertise. But a huge number of elements to customize make mastering the language a tough task.

For instance, the CSS even and odd rules can be really hard to work on. These are lesser known selectors that allow you to target even and odd elements in lists, tables, and everything you can fancy.

Here’s how the CSS even and odd rules work and the best way you can use them:

Using CSS Even and Odd Rules to create tables:

What is CSS Even and Odd Rules?

The rules allow you to target very specific elements. The name suggests its purpose. You can target two types of elements in virtually any situation, and then apply styles to them.

Pricing Tables – The best ones use colors to attract your eyes towards the plans they would like you to sign up for. Here, you can use even and odd selectors to help specific plans stand out.

Readable Extended Datasets – This is like making sense of a long table full of data. A little bit of CSS will help you to apply apply even and odds rules for creating a contrast between columns and rows. This  makes things more readable.

Highlighting Specific Items within a List – In case, you include a long list in content/ article, the CSS even and odd rules may make for the best option to highlight specific entries. You can try to bold certain items instead of experimenting with background colors. Try change font size, etc.

Since CSS even and odd rules are easy to apply, it is wise to make it a part of your resource. Here’s how you put it into practice:

Tables can be referred to as the most commonly used cases for CSS even and odd rules. Also tables are created with multiple elements. This makes them ideal candidates for selectors in question. The following is an example of a quick table with minimal styling:

CSS for Tables (even and odd rules):

Note – ‘tr’ refers to the HTML elements for each row on table.

tr:nth-child(even) {background: #CCC}

tr:nth-child(odd) {background: #4D4D4D}

The above listed code will set white backgrounds for even rows and grey for odd numbers. You may also target columns only. This is the code only with columns:

col:nth-child(even) {background: #CCC}

col:nth-child(odd) {background: #4D4D4D}

It is possible to use even and odd rules to target an element. It must contain sub-elements (rows or columns). If you don’t include these, the selector will not know the ones to be targeted. The lists include li HTML elements for every entry.

Here’s the example for the same:

<ul>

<li>First element.</li>

<li>Second element.</li>

<li>Third element.</li>

<li>Fourth element.</li>

</ul>

Here, you would want the even and odd selectors to target li elements. Hence, the CSS must look something like this:

li:nth-child(even) {background: #CCC}

li:nth-child(odd) {background: #4D4D4D}

It is not common to add background colors to list elements. Hence, you may have to use other kinds of customizations. One of the examples for this is to bold the odd elements in list so that they stand out:

<ul

><li>First element. </li>

<li>Second element. </li>

<li>Third element. </li>

<li>Fourth element. </li>

</ul>

Result

First element.

Second element.

Third element.

Fourth element.

There are no specific tricks for using even and odd selectors. You simply need to target the right elements. Thereafter, just as most freelance website designers & developers, you can also implement changes you wish to sans affecting the rest of the page.

Wrapping Up

CSS is not tough to learn. However, it is certainly a difficult subject to master. All you need to do exercises a little patience and focus, creating amazing designs and effects. With CSS, you can breathe life into simple tables.