There is such a selector, more specifically a pseudo-class, called :nth-child . Here is an example of its use:
UL LI:nth-child(3n+3) ( color:#CCC; )
What does the CSS above do? It selects every third element inside the bulleted list: it's the 3rd, 6th, 9th, 12th, and so on. Let's see exactly how this expression works and what else can be done with :nth-child .
It all depends on what is between the brackets. The :nth-child selector accepts two keywords: even and odd . It's simple here: even selects even elements such as 2nd, 4th, 6th, etc., and odd selects odd elements, such as 1st, 3rd, 5th, etc. d.
As you can see from the first example, :nth-child also accepts expressions as a parameter. Including the simplest equations, in other words, just numbers. If you put them in brackets, only one element with the corresponding number will be selected. For example, here's how to select only the fifth element:
UL LI:nth-child(5) ( color:#CCC; )
However, let's go back to 3n+3 from the first example. How does it work and why is every third element selected? The whole trick is in understanding the variable n and the reduced algebraic equation. Think of n as a zero-based set of integers. Then complete the equation. So 3n is 3×n , and the whole equation together is (3×n)+3 . Now, substituting numbers greater than or equal to zero instead of n, we get:
- (3 × 0) + 3 = 3 = 3rd element
- (3 × 1) + 3 = 6 = 6th element
- (3 × 2) + 3 = 9 = 9th element, etc.
What about: nth-child(2n+1) ?
- (2 × 0) + 1 = 1 = 1st element
- (2×1) + 1 = 3 = 3rd element
- (2 × 2) + 1 = 5 = 5th element, etc.
Yes, stop! It's the same as odd . Then maybe you shouldn't use this expression? But aren't we overcomplicating our first example in this case? What if instead of 3n+3 we write 3n+0 or even simpler 3n ?
- (3 × 0) = 0 = nothing
- (3 × 1) = 3 = 3rd element
- (3 × 2) = 6 = 6th element
- (3 × 3) = 9 = 9th element, etc.
So, as you can see, the result is the same, which means there is no need for +3 . We can use negative values of n just as well as subtraction in equations. For example, 4n-1:
- (4 × 0) - 1 = -1 = nothing
- (4 × 1) - 1 = 3 = 3rd element
- (4 × 2) - 1 = 7 = 7th element, etc.
Using -n may seem strange - if the final result is negative, then no elements will be included in the selection. But if you supplement the equation and again make the result positive, then the sample will turn out to be quite interesting: with it you can get the first n elements, for example like this: -n + 3:
- –0 + 3 = 3 = 3rd element
- –1 + 3 = 2 = 2nd element
- -2 + 3 = 1 = 1st element
- -3 + 3 = 0 = nothing, etc.
SitePoint has a nice guide with a nice sign, which I'll shamelessly post here:
| n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
Browser Support
The :nth-child selector is one of the few CSS selectors that is almost fully supported in modern browsers and is absolutely not supported in IE, not even IE8. So when it comes to using it, and the end result is progressive enhancement, you can safely use it for some typographical elements, like table row coloring. However, it should not be used in more serious cases. For example, rely on it in the layout of the site or remove the right margin from every third block in a three-by-three grid so that they fit in a row.
CSS nth-child is a pseudo class used to select elements using a numeric expression. Its syntax may seem a bit confusing at first glance.
In this article, we will look at:
- different ways to use :nth-child ;
- more flexible :nth-of-type selector;
- and their associated :nth-last-child and :nth-last-of-type selectors.
:nth-last-of-type
:nth-last-of-type selects child elements if their position in the document matches the pattern described by the algebraic expression.
The :nth-last-of-type selector looks something like this:
li:nth-child(expression); ()
"Expression" can be represented by the keywords even or odd , an integer, or a formula like an+b , where a and b are integers, positive or negative.
Because the CSS pseudo class nth child can be used to select a range various elements. Let's look at a few examples to make it clearer.
I have bulleted list of 12 elements. Let's see how we can use :nth-child to select a specific element or set of elements in a pattern:
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
To select the third element of the list, you need to specify li:nth-child(3) . You can use the even keyword to select all even elements. Conversely, you can use :nth-child(odd) to select all odd-numbered elements.
CSS nth child every 3rd - specify li:nth-child(3n) . To select the first four elements, use li:nth-child(-n+4) . To select all but the first four elements, li:nth-child(n+5) can be used.
Expression an + b
An alternative to using the odd keyword is to use the expression 2n+1 . But how does it work?
When an an+b expression contains non-zero values of a and b , the child elements are split into groups. If the expression is 2n+1 , the child elements are split into groups of two. Each element in the group is assigned an index, starting at 1 . The corresponding element in each group is index number b . In our example, this will be the first element.
If the expression is 3n+2 , the elements are grouped by three elements, and the second element in each group matches the expression.
If the value of b is negative, the matching element in the group is the element at index b . But it is counted backwards from index 1 . In this case, the corresponding element will belong not to this, but to the previous group.
The even keyword in CSS nth child can be expressed as 2n . In this case, we don't have a value for b , so every element of the group with index a is selected; 2n selects every second element, 3n selects every third, 4n selects every fourth, and so on.
Personally, I find the concept of splitting child elements into groups and finding the match index for each group very confusing. Although this is how the CSS selectors specification describes them.
I prefer the concept of searching every nth element - every 2nd, 3rd or 4th, etc. And then it's easier for me to imagine that the second part of the expression is an offset.
In the case of 2n+1, I read this expression as follows: " Find every second element and move selection down by 1».
If the expression is 3n-5 , it will read like this: " Find every third element and move selection up by 5».
Other selectors: nth-child
:nth-child has a corresponding pseudo-class :nth-last-child , which works the other way around.
li:nth-last-child(3n) starts from last child element and processes them backwards, matching every third element from the end of the list.
This pseudo-class is less common. However, it is often necessary to select the first or last child element. This can be done with :nth-child(1) or :nth-last-child(1) , but this method is not as common as the :first-child and :last-child pseudo-classes. However, only :first-child works in IE8 , :last-child and :nth selectors don't.
:nth-of-type
What often bothers me is that the CSS nth child pseudo-class sorts child elements by index and doesn't take into account the element's type.
Consider the following example.
Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue; Nunc sed turpis. Donec posuere vulputate arcu;lorem ipsum;
There is a section with a heading, a subheading and several paragraphs. I want the first paragraph to stand out a bit with a larger font size of 1.5em .
You might want to try using the section p:first-child code, as you need to add some extra styling to the first paragraph in that section. But that won't work because the first child of the section is h1 . In this case, the :first-of-type selector must be used.
Exists whole line selectors of this type are :first-of-type , :last-of-type , :nth-of-type , and :nth-last-of-type . They behave just like :nth-child , but select the nth instances of elements of a particular type.
Description
The :nth-child pseudo-class is used to add styling to elements based on the numbering in the element tree.
Syntax
element:nth-child(odd | even |<число> | <выражение>) {...}
Values
odd All odd element numbers. even All even element numbers. number The ordinal number of the child relative to its parent. The numbering starts from 1, which will be the first element in the list. expression Specified as an+b , where a and b are integers and n is a counter that automatically takes the value 0, 1, 2...If a is zero, then it is not written and the notation is reduced to b . If b is zero, then it is also omitted and the expression is written in the form an . a and b can be negative numbers, in which case the plus sign is changed to minus, for example: 5n-1.
By using negative values for a and b, some results may also be negative or zero. However, the elements are only affected by positive values due to the fact that element numbering starts from 1.
In table. 1 shows some possible expressions and keywords, and also indicates which item numbers will be involved.
HTML5 CSS3 IE Cr Op Sa Fx
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Oil | 16 | 34 | 62 | 74 | 57 |
| Gold | 4 | 69 | 72 | 56 | 47 |
| Wood | 7 | 73 | 79 | 34 | 86 |
| stones | 23 | 34 | 88 | 53 | 103 |
AT this example The :nth-child pseudo-class is used to change the style of the first row of the table, as well as to colorize all even rows (Figure 1).
I welcome you to my blog. I would like to write today on the topic of how to select the first parent element in css, because this allows you to use fewer style classes.
Pseudo-classes: first-child and first-of-type what is the difference?
In order to refer to the first element from the parent container in css, two pseudo-classes were invented. I immediately propose to consider everything with an example so that you understand:
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
Let's say we have such a markup. The goal is to refer to the first paragraph and style it separately from the others without adding classes to it. This can be done like this:
#wrapper p:first-child(
Color: red;
}
The color of the first paragraph will turn red, you can check.
#wrapper p:first-of-type(
color: red;
}
The same thing will happen. So what's the difference? And it lies in the fact that the first-of-type pseudo-class searches and finds the first element of the parent, given its type, and first-child does not look for anything - it just takes the first element of the parent that comes across and, if it is a paragraph, then applies styles to it. If not, nothing will be selected and applied.
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
Now consider: would first-of-type work in this case? Yes, because it takes into account the type of the element and will select the first paragraph, and not the first of all elements. Will first-child work? Try it. It won't work because the paragraph is not the first element in the parent.
Personally, I did not immediately understand the difference between these pseudo-classes and got confused for a while, but now, I hope I have explained it to you normally.
Another important detail
Elements are counted from the parent element, so if you specified like this:
Li:first-of-type(
…
}
Then the first list items in the body tag (that is, on the entire page) will be selected. Thus, in any list, the first item will be formatted differently.
If you write like this:
#sidebar li:first-of-type(
…
}
Then only the first items of the lists in the sidebar, that is, the side column on our site, will be selected.
Using the various selectors I wrote about, you can reach almost any element on a web page. In this article, you can read more about how to work with the nth-child pseudo-class in css and it gives you options in terms of element selection.
By the way, I forgot to mention the opposite pseudo-classes - last-child (and last-of-type, respectively). They allow you to select the last element from the parent container.
Where can you put into practice
I write about these pseudo-classes because they are actively used when laying out with css. Here you have on the page, for example, a block of similar posts, or comments, or something else. And you had an idea to somehow decorate its first element in a special way. Or maybe the last one. And yes, anyone can.
You just need to find out the name of the block in which the desired element is stored. Let's say we are dealing with popular records. The parent container has a popular class. Then we write like this:
Popular li:first-of-type(
Padding top: 20px
}
Everything, the first item of the list in it received an indent from above, and you can add whatever you want to the styles.
Here is another example. I have only three identical gray blocks in the body tag. Let's write like this.
Pseudo-classes can be used to select a specific element from a list. In this tutorial, we'll talk about the :nth-child pseudo-class, what you can create with this pseudo-class, and how it can be useful. The :nth-child pseudo-class allows you to select a group of elements with common properties. It is most commonly used to select even or odd elements from a group. It is often used to make the table look like a zebra by giving different background colors to odd and even rows.
tr:nth-child (odd) ( // background color ) tr:nth-child (even) ( // another background color )
The :nth-child pseudo-class also allows you to divide elements with a common property into groups and then select a specific element from each group using the following syntax:
Tr:nth-child (an+b) ( )
Here a determines the number of elements in the group, and b determines which element from the group will be selected. If you use the value 2n+1, then the elements will be divided into groups of two, and the first elements of each group, i.e., elements with an odd ordinal number, will be selected. If you use the value 2n+2, then the elements will again be divided into groups of two, but now the second elements of each group, i.e., elements with an even serial number, will be selected.
As an example to understand the :nth-child pseudo-class, we will select every fourth element with it, i.e., the fourth, eighth, twelfth, sixteenth, etc. To do this, we will divide the elements into groups of four and then select every fourth element.
Tr:nth-child (4n+4 ) ( // style every fourth element )
Below is a list of ten elements, and we'll use the :nth-child , :first-child , and :last-child pseudo-classes to select the elements we want to highlight.
Using the CSS:nth-child Pseudo-Class to Select a Single Element
By setting the :nth-child pseudo-class as a number, you can choose which child of the group to refer to:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
#selector_example li:nth-child (4 ) ( font-size: 150
Using the CSS:nth-child Pseudo-Class to Select All Elements Except the First Five
If you set the :nth-child pseudo-class to a value of the form n+ number, you can select all elements, starting with the element with this ordinal number:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
#selector_example li:nth-child (n+6 ) ( font-size: 150 %; font-weight:bold ; color:green ; )
Using the CSS:nth-child Pseudo-Class to Select Only the First Five Elements
When we set the :nth-child pseudo-class to a negative value n+ number, we select all elements that are before the element with this ordinal number:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
#selector_example li:nth-child (-n+5 ) ( font-size: 150 %; font-weight:bold ; color:green ; )
Using the CSS:nth-child Pseudo-Class to Select Every Third Element
The :nth-child pseudo-class can be used to select a sequence of elements by specifying how many elements are in the sequence and the ordinal of the desired element. If you set the value 3n+1, every third element will be selected, starting from the first:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
#selector_example li:nth-child (3n+1 ) ( font-size: 150 %; font-weight:bold ; color:green ; )
Using the CSS:nth-child Pseudo-Class to Select Only Odd Elements
You can set the :nth-child pseudo-class to odd to select all elements with odd ordinal numbers. That is, the first, third, fifth, seventh, ninth, etc. elements. This is very handy for setting colors for adjacent table rows.
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
#selector_example li:nth-child (odd) ( font-size: 150 %; font-weight:bold ; color:green ; )
Using the CSS:nth-child Pseudo-Class to Select Only Even Elements
This example shows the same as the last one, but this time all even-numbered elements are selected. That is, the second, fourth, sixth, eighth, tenth, etc. elements:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
#selector_example li:nth-child (even) ( font-size: 150 %; font-weight:bold ; color:green ; )
Using the CSS:first-child Pseudo-Class to Select the First Element
Another pseudo-class:first-child will select the first element:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
#selector_example li:first-child ( font-size: 150 %; font-weight:bold ; color:green ; )
Using the CSS:last-child Pseudo-Class to Select the Last Element
In addition to the :first-child pseudo-class, there is a :last-child pseudo-class that will select the last element from a group of elements:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
#selector_example li:last-child ( font-size: 150 %; font-weight:bold ; color:green ; )
Using the CSS pseudo-class:nth-last-child to select the penultimate element
You can also use the :nth-last-child pseudo-class, which combines the capabilities of the :last-child and :nth-child pseudo-classes to start counting elements from the end. That is, you can select an element by counting sequence numbers from the end of the group, for example, in a group of ten elements, you can select the second element from the end:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
#selector_example li:nth-last-child (2 ) ( font-size: 150 %; font-weight:bold ; color:green ; )
Check out the :nth-child pseudo-class with "