To make it the more generic possible you can use this:
tr:not[:nth-child[1n+6]]:not[:nth-child[3]] {
/* your rules here */
}
To explain it a little: you are saying you want to select the elements that are not from 6 on [so the first 5] and not 3rd, if you wrote
tr:nth-child[1n+6]
you were targeting the rows from 5 on, since you were selecting the rows
[1*0] + 6 [ = 6 ]
[1*1] + 6 [ = 7 ]
[1*2] + 6 [ = 8 ]
...and so on. This is what it means the expression [1n+X], where X in our case is 6.
Adding the :not pseudo selector to the expression above, you are saying you want to select the rows which are not from 5 on, so you will select from 5 down, the 1st, 2nd, 3rd, 4th and 5th.
Plus, adding one more :not selector, which targets the 3rd, you will get what you want => The first 5 without the 3rd!
/***************** UPDATED! I added a jsfiddle *******************/
Here you can see it working in this jsfiddle
The Note that, in the :nth-child[]
CSS pseudo-class matches elements based on their position among a group of siblings.Try it
element:nth-child[]
syntax, the child count includes children of any element type; but it is considered a match only if the element at that child position is of the specified element type.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.:nth-child[ [ of ]? ]
Keyword values
odd
Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.
even
Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.
Functional notation
Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B
, 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.
Examples
Example selectors
tr:nth-child[odd]
or tr:nth-child[2n+1]
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.
:nth-child[7]
Represents the seventh element.
:nth-child[5n]
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 [=5x0], 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.
:nth-child[n+7]
Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.
:nth-child[3n+4]
Represents elements 4 [=[3×0]+4], 7 [=[3×1]+4], 10 [=[3×2]+4], 13 [=[3×3]+4], etc.
:nth-child[-n+3]
Represents the first three elements. [=-0+3, -1+3, -2+3]
p:nth-child[n]
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].
p:nth-child[n+8]:nth-child[-n+15]
Represents the eighth through the fifteenth elements of a group of siblings.
Detailed example
HTML
span:nth-child[2n+1], WITHOUT an <em> among
the child elements.
Children 1, 3, 5, and 7 are selected.
Span 1!
Span 2
Span 3!
Span 4
Span 5!
Span 6
Span 7!
span:nth-child[2n+1], WITH an <em> among the
child elements.
Children 1, 5, and 7 are selected.
3 is used in the counting because it is a child, but it isn't selected because
it isn't a <span>.
Span!
Span
This is an `em`.
Span
Span!
Span
Span!
Span
span:nth-of-type[2n+1], WITH an <em> among the
child elements.
Children 1, 4, 6, and 8 are selected.
3 isn't used in the counting or selected because it is an
<em>, not a <span>, and
nth-of-type only selects children of that type. The
<em> is completely skipped over and ignored.
Span!
Span
This is an `em`.
Span!
Span
Span!
Span
Span!
CSS
html {
font-family: sans-serif;
}
span,
div em {
padding: 5px;
border: 1px solid green;
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: lime;
}
Result
Specifications
Unknown specification # nth-child-pseudo |
Browser compatibility
BCD tables only load in the browser