core
/
oga
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added various ASCII examples of :nth-child().

This commit is contained in:
Yorick Peterse 2014-11-03 00:05:19 +01:00
parent bb13834e76
commit 7ac7a5e863
1 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
doc/css_selectors.md
View File

@ -407,7 +407,15 @@ specify one of the following:
The first element in a node set for `:nth-child()` is located at position 1, The first element in a node set for `:nth-child()` is located at position 1,
_not_ position 0 (unlike most programming languages). As a result _not_ position 0 (unlike most programming languages). As a result
`:nth-child(1)` matches the _first_ element, _not_ the second. `:nth-child(1)` matches the _first_ element, _not_ the second. This can be
visualized as following:
:nth-child(2)
1 2 3 4 5 6
+---+ +---+ +---+ +---+ +---+ +---+
| | | X | | | | | | | | |
+---+ +---+ +---+ +---+ +---+ +---+
Besides using a literal index argument you can also use an interval, optionally Besides using a literal index argument you can also use an interval, optionally
with an offset. This can be used to for example match every 2nd element, or with an offset. This can be used to for example match every 2nd element, or
@ -437,13 +445,23 @@ token. If this is not desired the following grammar can be used instead:
To match every 2nd element you'd use the following: To match every 2nd element you'd use the following:
:nth-child(2n) :nth-child(2n)
To match every 2nd element starting at element 2 you'd instead use this: 1 2 3 4 5 6
+---+ +---+ +---+ +---+ +---+ +---+
| | | X | | | | X | | | | X |
+---+ +---+ +---+ +---+ +---+ +---+
:nth-child(2n+2) To match every 2nd element starting at element 1 you'd instead use this:
As mentioned the `+2` in the above example is the initial offset. This is :nth-child(2n+1)
1 2 3 4 5 6
+---+ +---+ +---+ +---+ +---+ +---+
| X | | | | X | | | | X | | |
+---+ +---+ +---+ +---+ +---+ +---+
As mentioned the `+1` in the above example is the initial offset. This is
however _only_ the case if the second number is positive. That means that for however _only_ the case if the second number is positive. That means that for
`:nth-child(2n-2)` the offset is _not_ `-2`. When using a negative offset the `:nth-child(2n-2)` the offset is _not_ `-2`. When using a negative offset the
actual offset first has to be calculated. When using an argument in the form of actual offset first has to be calculated. When using an argument in the form of
@ -475,8 +493,24 @@ Using `:nth-child(n)` simply matches all elements in the set. Using
Expressions such as `:nth-child(-n-5)` are invalid as both parts of the interval Expressions such as `:nth-child(-n-5)` are invalid as both parts of the interval
(`-n` and `-5`) are a negative. However, `:nth-child(-n+5)` is (`-n` and `-5`) are a negative. However, `:nth-child(-n+5)` is
perfectly valid and would match the first 5 elements in a set. Using perfectly valid and would match the first 5 elements in a set:
`:nth-child(n+5)` would match all elements starting at element 5.
:nth-child(-n+5)
1 2 3 4 5 6
+---+ +---+ +---+ +---+ +---+ +---+
| X | | X | | X | | X | | X | | |
+---+ +---+ +---+ +---+ +---+ +---+
Using `:nth-child(n+5)` would match all elements starting at element 5:
:nth-child(n+5)
1 2 3 4 5 6 7 8 9 10
+---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+
| | | | | | | | | X | | X | | X | | X | | X | | X |
+---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+
To summarize: To summarize: