Table odd row css

CSS Table with Alternating Color Rows

You can use the nth child selector in CSS3 to very simply create tables with alternating row colors.

I’ll show you an example of a table with alternating rows along with some working code that you can copy.

If you need it, I also have information on how to build a table with alternating columns.

Browser Support for Nth Child Selector

All modern browsers support the nth child selector but it’s not supported in Internet Explorer 8 and versions below. With that in mind, I have added an extra css declaration so that in these older version of IE all the tables rows will have a default background color. This is just in case you’ve been cursed by your present employer to support ancient browsers.

This allows the table to still be visually legible and functional but it doesn’t exactly replicate the alternating row color effect that is present in modern browsers. If this was of paramount importance to you then you’d have to write some javascript for alternating colors to achieve this effect.

CSS Table Example with Alternating Rows

The CSS Code for the Table

To make the table above you have to use the tr:nth-child(odd) selector to define all the odd rows in a table and the tr:nth-child(even) selector to define all the even rows of the table.

The complete working CSS code and HTML for the table example can be copied from the box below.

 .TFtable < width:100%; border-collapse:collapse; >.TFtable td /* provide some minimal visual accomodation for IE8 and below */ .TFtable tr /* Define the background color for all the ODD background rows */ .TFtable tr:nth-child(odd) /* Define the background color for all the EVEN background rows */ .TFtable tr:nth-child(even)  
Text
Text
Text
 
Text
Text
Text
 
Text
Text
Text
 
Text
Text
Text
  

Alternating Table Rows just with CSS

Anyways, it’s now pretty simple to make a table with rows of alternating colors just by using CSS.

Modern support is good for all browsers except for IE8 and below which is now generally less than 1% of the market and so you can easily provide them with a visually readable alternative.

Most Popular Text Tools

• Remove Line Breaks: Remove unwanted line breaks from your text.
• Random Word Generator: Generate a list of random words. Great tool for brainstorming ideas.
• Alphabetical Order: Alphabetize all sorts of text content with this tool.
• Text to HTML: Automatically change plain text into HTML paragraphs.
• HTML to Text: Remove all HTML tags, leaving only text content.
• Online Sentence Counter: Quickly count the number of sentences in your content.
• Random Choice Generator: Randomly pick a choice from a list of options.
• Reverse Text Generator: Create social media posts or any text in reverse text.
• Remove Duplicate Lines: Remove all of the identical lines in your content.
• Paragraph to Single Line: Convert any multiple paragraphs to a single line.

Alphabetical Tools

Random Generators

Line Break Tools

Fun Text Tools

Text Changing Tools

SEO and Word Tools

Content Conversion Tools

HTML Code Generators

HTML Compression

HTML Encoding Tools

• ©2023 TextFixer.com
• Twitter | Contact
• Misc. Tutorials | About
• Privacy Policy | Terms of Use

Источник

:nth-child()

The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.

Try it

Note: In the element:nth-child() syntax, the child count includes sibling children of any element type; but it is considered a match only if the element at that child position matches the other components of the selector.

Syntax

:nth-child() takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.

Keyword values

Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.

Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.

Functional notation

Represents elements whose numeric position in a series of siblings matches the pattern An+B , for every positive integer or zero value of n , where:

• A is an integer step size,
• B is an integer offset,
• n is all nonnegative integers, starting from 0.

It can be read as the An+B -th element of a list. The A and B must both have values.

The of syntax

By passing a selector argument, we can select the nth element that matches that selector. For example, the following selector matches the first three list items which have a class=»important» set.

:nth-child(-n + 3 of li.important)  > 

This is different from moving the selector outside of the function, like:

This selector selects list items if they are among the first three children and match the selector li.important .

Examples

Example selectors

Represents the odd rows of an HTML table: 1, 3, 5, etc.

tr:nth-child(even) or tr:nth-child(2n)

Represents the even rows of an HTML table: 2, 4, 6, etc.

Represents the seventh element.

Represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. The first one to be returned as a result of the formula is 0 [=5×0], resulting in a no-match, since the elements are indexed from 1, whereas n starts from 0. This may seem weird at first, but it makes more sense when the B part of the formula is >0 , like in the next example.

Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.

Represents elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.

Represents the first three elements. [=-0+3, -1+3, -2+3]

Represents every

element in a group of siblings. This selects the same elements as a simple p selector (although with a higher specificity).

p:nth-child(1) or p:nth-child(0n+1)

Represents every

that is the first element in a group of siblings. This is the same as the :first-child selector (and has the same specificity).

Represents the eighth through the fifteenth

elements of a group of siblings.

Detailed example

HTML

h3> code>span:nth-child(2n+1)code>, WITHOUT an code><em>code> among the child elements. h3> p>Children 1, 3, 5, and 7 are selected.p> div class="first"> span>Span 1!span> span>Span 2span> span>Span 3!span> span>Span 4span> span>Span 5!span> span>Span 6span> span>Span 7!span> div> br /> h3> code>span:nth-child(2n+1)code>, WITH an code><em>code> among the child elements. h3> p> Children 1, 5, and 7 are selected.br /> 3 is used in the counting because it is a child, but it isn't selected because it isn't a code><span>code>. p> div class="second"> span>Span!span> span>Spanspan> em>This is an `em`.em> span>Spanspan> span>Span!span> span>Spanspan> span>Span!span> span>Spanspan> div> br /> h3> code>span:nth-of-type(2n+1)code>, WITH an code><em>code> among the child elements. h3> p> Children 1, 4, 6, and 8 are selected.br /> 3 isn't used in the counting or selected because it is an code><em>code>, not a code><span>code>, and code>nth-of-typecode> only selects children of that type. The code><em>code> is completely skipped over and ignored. p> div class="third"> span>Span!span> span>Spanspan> em>This is an `em`.em> span>Span!span> span>Spanspan> span>Span!span> span>Spanspan> span>Span!span> div> 

CSS

*  font-family: sans-serif; > span, div em  padding: 5px; border: 1px solid tomato; display: inline-block; margin-bottom: 3px; > 

.first span:nth-child(2n + 1), .second span:nth-child(2n + 1), .third span:nth-of-type(2n + 1)  background-color: tomato; > 

Result

Using ‘of ‘

In this example there is an unordered list of names, some of them have been marked as noted using class=»noted» . These have been highlighted with a thick bottom border.

HTML

ul> li class="noted">Diegoli> li>Shilpali> li class="noted">Caterinali> li>Jaylali> li>Tyroneli> li>Ricardoli> li class="noted">Gilali> li>Siennali> li>Titilayoli> li class="noted">Lexili> li>Aylinli> li>Leoli> li>Leylali> li class="noted">Bruceli> li>Aishali> li>Veronicali> li class="noted">Kyoukoli> li>Shireenli> li>Tanyali> li class="noted">Marleneli> ul> 

CSS

*  font-family: sans-serif; > ul  display: flex; flex-wrap: wrap; list-style: none; font-size: 1.2rem; padding-left: 0; > li  margin: 0.125rem; padding: 0.25rem; > li  border: 1px solid tomato; > .noted  border-bottom: 5px solid tomato; > 

In the following CSS we are targeting the even list items that are marked with class=»noted» .

li:nth-child(even of .noted)  background-color: tomato; border-bottom-color: seagreen; > 

Result

Items with class=»noted» have a thick bottom border and items 3, 10 and 17 have a solid background as they are the even list items with class=»noted» .

of selector syntax vs selector nth-child

In this example, there are two unordered lists of names. The first list shows the effect of li:nth-child(-n + 3 of .noted) and the second list shows the effect of li.noted:nth-child(-n + 3) .

HTML

ul class="one"> li class="noted">Diegoli> li>Shilpali> li class="noted">Caterinali> li>Jaylali> li>Tyroneli> li>Ricardoli> li class="noted">Gilali> li>Siennali> li>Titilayoli> li class="noted">Lexili> ul> ul class="two"> li class="noted">Diegoli> li>Shilpali> li class="noted">Caterinali> li>Jaylali> li>Tyroneli> li>Ricardoli> li class="noted">Gilali> li>Siennali> li>Titilayoli> li class="noted">Lexili> ul> 

CSS

*  font-family: sans-serif; > ul  display: flex; flex-wrap: wrap; list-style: none; font-size: 1.2rem; padding-left: 0; > li  margin: 0.125rem; padding: 0.25rem; > li  border: 1px solid tomato; > .noted  border-bottom: 5px solid tomato; > 

ul.one > li:nth-child(-n + 3 of .noted)  background-color: tomato; border-bottom-color: seagreen; > ul.two > li.noted:nth-child(-n + 3)  background-color: tomato; border-bottom-color: seagreen; > 

Result

The first case applies a style to the first three list items with class=»noted» whether or not they are the first three items in the list.

The second case applies a style to the items with class=»noted» if they are within the first 3 items in the list.

Using of selector to fix striped tables

A common practice for tables is to use zebra-stripes which alternates between light and dark background colors for rows, making tables easier to read and more accessible. If a row is hidden, the stripes will appear merged and alter the desired effect. In this example, you can see two tables with a hidden row. The second table handles hidden rows using of :not([hidden]) .

HTML

table class="broken"> thead> tr>th>Nameth>th>Ageth>th>Countryth>tr> thead> tbody> tr>td>Mamitianatd>td>23td>td>Madagascartd>tr> tr>td>Yukitd>td>48td>td>Japantd>tr> tr hidden>td>Tlayolotltd>td>36td>td>Mexicotd>tr> tr>td>Adilahtd>td>27td>td>Moroccotd>tr> tr>td>Vienotd>td>55td>td>Finlandtd>tr> tr>td>Ricardotd>td>66td>td>Braziltd>tr> tbody> table> table class="fixed"> thead> tr>th>Nameth>th>Ageth>th>Countryth>tr> thead> tbody> tr>td>Mamitianatd>td>23td>td>Madagascartd>tr> tr>td>Yukitd>td>48td>td>Japantd>tr> tr hidden>td>Tlayolotltd>td>36td>td>Mexicotd>tr> tr>td>Adilahtd>td>27td>td>Moroccotd>tr> tr>td>Vienotd>td>55td>td>Finlandtd>tr> tr>td>Ricardotd>td>66td>td>Braziltd>tr> tbody> table> 

CSS

.wrapper  display: flex; justify-content: space-around; > td  padding: 0.125rem 0.5rem; > 

.broken > tbody > tr:nth-child(even)  background-color: silver; > 

.fixed > tbody > tr:nth-child(even of :not([hidden]))  background-color: silver; > 

Result

In the first table this is just using :nth-child(even) the third row has the hidden attribute applied to it. So in this instance the 3rd row is not visible and the 2nd & 4th rows are counted as even, which technically they are but visually they are not.

In the second table the of syntax is used to target only the tr s that are not hidden using :nth-child(even of :not([hidden])) .

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник