Friday 20 September 2013

Complex Selectors - Part5


Using Pseudo-class Numbers & Expressions

As mentioned, using numbers outright within a pseudo-class will count from the beginning, or end, of the document tree and select one element accordingly. For example, the li:nth-child(4) selector will select the fourth list item within a list. Counting begins with the first list item and increases by one for each list item, until finally locating and selecting the forth item. When using a number outright it must be a positive number.
Expressions for pseudo-classes fall in the format of anan+ban-bn+b-n+b, and -an+b. The same expression may be translated and read as (a×n)±b. The a variable stands for the multiplier in which elements will be counted in while the b variable stands for where the counting will begin or take place.
For example, the li:nth-child(3n) selector will identify every third list item within a list. Using the expression this equates to 3×03×13×2, and so forth. As you can see the results of this expression lead to the third, sixth, and every element a multiple of three being selected.
Additionally, the odd and even keyword values may be used. As expected, these will select odd or even elements respectively. Should keyword values not be appealing the expression of 2n+1 would select all odd elements while the expression of 2n would select all even elements.
Using the li:nth-child(4n+7) selector will identify every forth list item starting with the seventh list item. Again, using the expression this equates to (4×0)+7(4×1)+7(4×2)+7, and so forth. The results of this expression leading to the seventh, eleventh, fifteenth, and every element a multiple of four here on out being selected.
Using the n argument without being prefixed by a number results in the a variable being interpreted as 1. With the li:nth-child(n+5) selector every list item will be selected starting with the fifth list item, leaving the first four list items unselected. Within the expression this breaks down as (1×0)+5(1×1)+5(1×2)+5, and so forth.
To make things a bit more complicated negative numbers may also be used. For example, the li:nth-child(6n-4) selector will start counting every sixth list item starting at negative four, selecting the second, eighth, and fourteenth list items and so forth. The same selector, li:nth-child(6n-4), could also be written as li:nth-child(6n+2), without the use of a negative b variable.
A negative a variable, or a negative n argument, must be followed by a positive b variable. When preceded by a negative a variable or negative n argument the b variable identifies how high the counting will reach. For example, the li:nth-child(-3n+12) selector will select every third list item within the first twelve list items. The selectorli:nth-child(-n+9) will select the first nine list items within a list as the n argument, without any stated avariable, is defaulted to -1.

:nth-child(n) & :nth-last-child(n)

With a general understanding of how the pseudo-class numbers and expressions work let’s take a look at the actual pseudo-classes in which these numbers and expressions may be used, the first of which being the :nth-child(n)and :nth-last-child(n) pseudo-classes. These pseudo-classes work a bit like the :first-child and :last-child pseudo-classes in that they look, and count, all of the elements within a parent and only select the element specifically identified. The :nth-child(n) works from the beginning of the document tree while the :nth-last-child(n) works from the end of the document tree.
Using the :nth-child(n) pseudo-class, let’s look at the li:nth-child(3n) selector. The selector here will identify every third list item, thus lines 4 and 7 are marked in bold.
CSS
  1. STRUCTURAL & POSITION PSEUDO-CLASSESli:nth-child(3n) {...}
HTML
  1. STRUCTURAL & POSITION PSEUDO-CLASSES<ul>
  2. <li>...</li>
  3. <li>...</li>
  4. <li>...</li>
  5. <li>...</li>
  6. <li>...</li>
  7. <li>...</li>
  8. </ul>
Using a different expression within the :nth-child(n) pseudo-class will yield a different selection. The li:nth-child(2n+3) selector, for example, will identify every second list item starting with the third and then onward. As a result, the list items lines 4 and 6 are selected and marked bold.
CSS
  1. STRUCTURAL & POSITION PSEUDO-CLASSESli:nth-child(2n+3) {...}
HTML
  1. STRUCTURAL & POSITION PSEUDO-CLASSES<ul>
  2. <li>...</li>
  3. <li>...</li>
  4. <li>...</li>
  5. <li>...</li>
  6. <li>...</li>
  7. <li>...</li>
  8. </ul>
Changing the expression again, this time with a negative value, yields new selection. Here the li:nth-child(-n+4)selector is identifying the top four list items, leaving the rest of the list items unselected, thus lines 2 through 5 are marked bold.
CSS
  1. STRUCTURAL & POSITION PSEUDO-CLASSESli:nth-child(-n+4) {...}
HTML
  1. STRUCTURAL & POSITION PSEUDO-CLASSES<ul>
  2. <li>...</li>
  3. <li>...</li>
  4. <li>...</li>
  5. <li>...</li>
  6. <li>...</li>
  7. <li>...</li>
  8. </ul>
Adding an negative integer before the n argument changes the selection again. Here the li:nth-child(-2n+5)selector identifies every second list item within the first five list items, thus the list items on lines 2, 4, and 6 are selected and marked in bold.
CSS
  1. STRUCTURAL & POSITION PSEUDO-CLASSESli:nth-child(-2n+5) {...}
HTML
  1. STRUCTURAL & POSITION PSEUDO-CLASSES<ul>
  2. <li>...</li>
  3. <li>...</li>
  4. <li>...</li>
  5. <li>...</li>
  6. <li>...</li>
  7. <li>...</li>
  8. </ul>
Changing from the :nth-child(n) pseudo-class to the :nth-last-child(n) pseudo-class switches the direction of counting, with counting starting from the end of the document tree using the :nth-last-child(n) pseudo-class. The li:nth-last-child(3n+2) selector, for example, will identify every third list item starting from the second to last item in a list, moving towards the beginning of the list. Here the list items on lines 3 and 6 are selected, thus marked bold.
CSS
  1. STRUCTURAL & POSITION PSEUDO-CLASSESli:nth-last-child(3n+2) {...}
HTML
  1. STRUCTURAL & POSITION PSEUDO-CLASSES<ul>
  2. <li>...</li>
  3. <li>...</li>
  4. <li>...</li>
  5. <li>...</li>
  6. <li>...</li>
  7. <li>...</li>
  8. </ul>

:nth-of-type(n) & :nth-last-of-type(n)

The :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes are very similar to that of the :nth-child(n) and :nth-last-child(n) pseudo-classes, however instead of counting every element within a parent the:nth-of-type(n) and :nth-last-of-type(n) pseudo-classes only count elements of their own type. For example, when counting paragraphs within an article, the :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes will skip any headings, divisions, or miscellaneous elements that are not paragraphs, while the :nth-child(n)and :nth-last-child(n) would count every element, no matter it’s type, only selecting the ones that match the element within the stated selector. Additionally, all of the same expression possibilities used within the :nth-child(n)and :nth-last-child(n) pseudo-classes are also available within the :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes.
Using the :nth-of-type(n) pseudo-class within the p:nth-of-type(3n) selector we are able to identify every third paragraph within a parent, regardless of other sibling elements within the parent. Here the paragraphs on lines 5 and 9 are selected, thus marked bold.
CSS
  1. STRUCTURAL & POSITION PSEUDO-CLASSESp:nth-of-type(3n) {...}
HTML
  1. STRUCTURAL & POSITION PSEUDO-CLASSES<article>
  2. <h1>...</h1>
  3. <p>...</p>
  4. <p>...</p>
  5. <p>...</p>
  6. <h2>...</h2>
  7. <p>...</p>
  8. <p>...</p>
  9. <p>...</p>
  10. </article>
As with the :nth-child(n) and :nth-last-child(n) pseudo-classes, the primary difference between the :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes is that the :nth-of-type(n) pseudo-class counts elements from the beginning of the document tree and the :nth-last-of-type(n) pseudo-class counts elements from the end of the document tree.
Using the :nth-last-of-type(n) pseudo-class we can write the p:nth-last-of-type(2n+1) selector which identifies every second paragraph from the end of a parent element starting with the last paragraph. Here the paragraphs on lines 4, 7, and 9 are selected, thus marked bold.
CSS
  1. STRUCTURAL & POSITION PSEUDO-CLASSESp:nth-last-of-type(2n+1) {...}
HTML
  1. STRUCTURAL & POSITION PSEUDO-CLASSES<article>
  2. <h1>...</h1>
  3. <p>...</p>
  4. <p>...</p>
  5. <p>...</p>
  6. <h2>...</h2>
  7. <p>...</p>
  8. <p>...</p>
  9. <p>...</p>
  10. </article>