Parity selector

First, the parity selector

      Our table for easy viewing when presenting data, and interlaced display different colors, although this effect can be achieved with the use of class selectors class, but was too much trouble, in order to more easily show this particular effect we need to a special selector, which is odd selector.

Second, the parity selector style :

• Usually in front of a label or other types of names;
• After the colon   :   spaced apart, and   n   denotes the n-th, Child  represents sub-elements;
• child followed by a pair of parentheses () , brackets indicate whether this is the first of several elements;
• Which can be a digital or an  ODD (odd number of elements)   or  even (even-numbered elements )
• Brackets behind braces  {}  , the background color pattern can be placed on the inside;
• odd  single line  
• even a two-line  

Third, the parity selector application

[ Parity selector ] using the odd and even properties, specifically written as follows:

• <style type="text/css">
•  tr:nth-child(odd) {.... }
• table tr:nth-child(even) { .... }
• </style>
• <table>
•   <tr><td>...</td></tr>
•   <tr><td>...</td></tr>
•   <tr><td>...</td></tr>
•   <tr><td>...</td></tr>
• </table>

: Nth-Child ( n- ) selecting N sub-matching elements belonging to the parent element, regardless of the type of element.

n  may be a number, key word or formulas.

Using the formula ( AN  +  B ). Description: indicates the length of the cycle, n being the counter (starting from 0), b is an offset value.

Here, we specify the subscript p is the background color of all the elements of a multiple of 3:

<! DOCTYPE HTML > 
< HTML > 
< head > 
< style >  
P: Child-Nth (with 3N + 0) 
{ 
background : # FF0000 ; 
} 
</ style > 
</ head > 
< body > 
< P > of the first paragraph. </ P > 
< P > the second paragraph. </ P > 
< P > of the third paragraph. </ P > 
< P > The fourth paragraph. </P > 
< P > fifth paragraphs. </ P > 
< P > sixth paragraph. </ P > 
< P > seventh paragraphs. </ P > 
< P > eighth paragraph. </ P > 
< P > ninth paragraphs. </ P > 
</ body > 
</ HTML >