CSS nth-child: what exactly does nth-child(1n) select
Xn
essentially means every Xth child, where Xn+Y
is every Xth child with an offset of Y.
1n
is quite nonsensical, as it will just select every child (every 1th child, which essentially is just every child).
div:nth-child(1n)
{
color: red;
}
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
Can one use CSS :nth-child (or similar) to select batches of elements in HTML, e.g every other 4 nodes?
Yes, you can use a group of nth-child
selectors like in the below snippet to select a repeating group of elements based on a pattern.
One thing to note is that selecting every 4th element and the next 4 after it is equivalent to selecting all elements after the 4th element and hence I have restricted the sample to just the next 2 elements.
Explanation of the selector (selects 4th, 5th, 8th, 9th elements and so on):
nth-child(4n+4)
- selects 4th (4*0 + 4), 8th (4*1 + 4), 12th (4*2 +4) elementsnth-child(4n+5)
- selects 5th (4*0 + 5), 9th (4*1 + 5), 13th (4*2 + 5) elements.
As you can see from the explanation, the series starts from the 4th element and repeats from then on. If your need is to start with the series from the 1st element (say 1st, 2nd, 5th, 6th etc) then you could use the selector group as div:nth-child(4n+1), div:nth-child(4n+2)
.
div:nth-child(4n+4), div:nth-child(4n+5){
color: red;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
What is the difference between p:nth-child(2) and p:nth-of-type(2)?
This question may remind you of What is the difference between :first-child and :first-of-type? — and in fact, a lot of parallels can be drawn between the two. Where this question greatly differs from the other is the arbitrary integer argument X, as in :nth-child(X)
and :nth-of-type(X)
. They're similar in principle to their "first" and "last" counterparts, but the potentially matching elements vary greatly based on what's actually in the page.
But first, some theory. Remember that simple selectors are independent conditions. They remain independent even when combined into compound selectors. That means that the p
neither is influenced by, nor influences, how :nth-child()
or :nth-of-type()
matches. Combining them this way simply means that elements must match all of their conditions simultaneously in order to match.
Here's where things get interesting. This independent matching means I can get pretty creative in how I express compound (and complex) selectors in terms of plain English, without changing the meaning of the selectors. In fact, I can do so right now in a way that makes the difference between :nth-child(2)
and :nth-of-type(2)
seem so significant that the pseudo-classes might as well be completely unrelated to each other (except for the "siblings" part anyway):
p:nth-child(2)
: Select the second child among its siblings if and only if it is ap
element.p:nth-of-type(2)
: Select the secondp
element among its siblings.
All of a sudden, they sound really different! And this is where a bit of explanation helps.
Any element may only have a single child element matching :nth-child(X)
for any integer X at a time. This is why I've chosen to emphasize "the second child" by mentioning it first. In addition, this child element will only match p:nth-child(X)
if it happens to be of type p
(remember that "type" refers to the tagname). This is very much in line with :first-child
and :last-child
(and, similarly, p:first-child
and p:last-child
).
There's two aspects to :nth-of-type(X)
on the other hand:
Because the "type" in
:nth-of-type()
is the same concept as the "type" in a type selector, this family of pseudo-classes is designed to be used in conjunction with type selectors (even though they still operate independently). This is whyp:nth-of-type(2)
can be expressed as succinctly as "Select the secondp
element among its siblings." It just works!However, unlike
:first-of-type
and:last-of-type
, the X requires that there actually be that many child elements of the same type within their parent element. For example, if there's only onep
element within its parent,p:nth-of-type(2)
will match nothing within that parent, even though thatp
element is guaranteed to matchp:first-of-type
andp:last-of-type
(as well as, by extension,p:only-of-type
).
An illustration:
<div class="parent">
<p>Paragraph</p>
<p>Paragraph</p> <!-- [1] p:nth-child(2), p:nth-of-type(2) -->
<p>Paragraph</p>
<footer>Footer</footer>
</div>
<div class="parent">
<header>Header</header>
<p>Paragraph</p> <!-- [2] p:nth-child(2) -->
<p>Paragraph</p> <!-- [3] p:nth-of-type(2) -->
<footer>Footer</footer>
</div>
<div class="parent">
<header>Header</header>
<figure>Figure 1</figure>
<p>Paragraph</p> <!-- [4] -->
<footer>Footer</footer>
</div>
<div class="parent">
<header>Header</header>
<p>Paragraph</p> <!-- [2] p:nth-child(2) -->
<figure>Figure 1</figure>
<hr>
<figure>Figure 2</figure> <!-- [5] .parent > :nth-of-type(2) -->
<p>Paragraph</p> <!-- [5] .parent > :nth-of-type(2) -->
<p>Paragraph</p>
<footer>Footer</footer>
</div>
What's selected, what's not, and why?
Selected by both
p:nth-child(2)
andp:nth-of-type(2)
The first two children of this element are bothp
elements, allowing this element to match both pseudo-classes simultaneously for the same integer argument X, because all of these independent conditions are true:- it is the second child of its parent;
- it is a
p
element; and - it is the second
p
element within its parent.
Selected by
p:nth-child(2)
only
This second child is ap
element, so it does matchp:nth-child(2)
.But it's the first
p
element (the first child is aheader
), so it does not matchp:nth-of-type(2)
.Selected by
p:nth-of-type(2)
only
Thisp
element is the secondp
element after the one above, but it's the third child, allowing it to matchp:nth-of-type(2)
but notp:nth-child(2)
. Remember, again, that a parent element can only have one child element matching:nth-child(X)
for a specific X at a time — the previousp
is already taking up the:nth-child(2)
slot in the context of this particular parent element.Not selected
Thisp
element is the only one in its parent, and it's not its second child. Therefore it matches neither:nth-child(2)
nor:nth-of-type(2)
(not even when not qualified by a type selector; see below).Selected by
.parent > :nth-of-type(2)
This element is the second of its type within its parent. Like:first-of-type
and:last-of-type
, leaving out the type selector allows the pseudo-class to potentially match more than one element within the same parent. Unlike them, how many it actually matches depends on how many of each element type there actually are.Here, there are two
figure
elements and threep
elements, allowing:nth-of-type(2)
to match afigure
and ap
. But there's only oneheader
, onehr
, and onefooter
, so it won't match elements of any of those types.
In conclusion, :nth-child()
and :nth-of-type()
, with an integer argument X (i.e. not in the form An+B with a coefficient A of n), function pretty similarly to :first-child
/:last-child
and :first-of-type
/:last-of-type
, with the major difference being that the argument, along with the page itself, influences how many different elements may be matched with :nth-of-type()
.
Of course, there's a whole lot more to :nth-child()
and :nth-of-type()
than just a simple integer argument, but needless to say the details and possibilities thereof are outside the scope of this question.
Apply CSS in nth-child to nth-child
This is what you want?
In this first css -n+5
selecting first five elements before 5th
element because of negetive. If you remove negetive it will select all elements with 5th elements. Therefore again added n+11
for elements 11 to 15.
You can use .second
css if you don't want to add css after 15th element.
.first p:nth-child(-n+5) {
color: green;
}
.first p:nth-child(n + 5) {
color: orange;
}
.first p:nth-child(n + 11) {
color: red;
}
.second {
margin-top: 50px;
}
.second p:nth-child(-n+5) {
color: green;
}
.second p:nth-child(n + 6):nth-child(-n + 10) {
color: orange;
}
.second p:nth-child(n + 11):nth-child(-n + 15) {
color: red;
}
<div class="first">
<p>Student 1</p>
<p>Student 2</p>
<p>Student 3</p>
<p>Student 4</p>
<p>Student 5</p>
<p>Student 6</p>
<p>Student 7</p>
<p>Student 8</p>
<p>Student 9</p>
<p>Student 10</p>
<p>Student 11</p>
<p>Student 12</p>
<p>Student 13</p>
<p>Student 14</p>
<p>Student 15</p>
</div>
<div class="second">
<p>Student 1</p>
<p>Student 2</p>
<p>Student 3</p>
<p>Student 4</p>
<p>Student 5</p>
<p>Student 6</p>
<p>Student 7</p>
<p>Student 8</p>
<p>Student 9</p>
<p>Student 10</p>
<p>Student 11</p>
<p>Student 12</p>
<p>Student 13</p>
<p>Student 14</p>
<p>Student 15</p>
<p>Student 16</p>
<p>Student 17</p>
</div>
css nth-child, every 3rd + 1, ie: 4, 7, 10, 13, etc
Every 3rd child is 3n
but to start on the 4th one, use 4
as an offset.
div:nth-child(3n + 4) {
color: red;
}
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
How to use css selector nth-of-type and nth-child to locate element in Python Selenium
For completeness, I have added the </li>
, </ul>
and </class>
tags at the appropriate places and the ideal HTML will be:
<class id="class1">
<ul>
<li>
<strong>section 1</strong>
<a href="link.com/home1">some link 1</a>
</li>
<li>
<strong>section 2</strong>
<a href="link.com/home">some link 2</a>
</li>
</ul>
</class>
<class id="class1">
<ul>
<li>
<strong>section 3</strong>
<a href="link.com/home/abc">some link 3</a>
</li>
<li>
<strong>section 4</strong>
<a href="link.com/home/def">some link 4</a>
</li>
</ul>
</class>
To locate the href
attribute of section 2 you can use either of the following Locator Strategies:
Using
nth-child()
:class#class1 > ul li:nth-child(2) a[href$="home"]
Using
nth-child()
:class#class1 > ul li:nth-of-type(2) a[href$="home"]
Solution
To print the value of the href attribute you can use either of the following Locator Strategies:
Using
nth-child()
:print(driver.find_element(By.CSS_SELECTOR, "class#class1 > ul li:nth-child(2) a[href$='home']").get_attribute("href"))
Using
nth-child()
:print(driver.find_element(By.CSS_SELECTOR, "class#class1 > ul li:nth-of-type(2) a[href$='home']").get_attribute("href"))
tl; dr
What is the difference between p:nth-child(2) and p:nth-of-type(2)?
How to override CSS nth-child selector property from the HTML
You can't directly affect the style of the nth-child element like that, but you can set CSS variables which can be picked up when styling a property.
In this snippet a parent container can be styled inline with a --bg variable setting and this can be picked up by the settings for the nth-child(even).
.gantt-row {
display: grid;
grid-template-columns: 150px 1fr;
background-color: #fff;
}
.gantt-row:nth-child(even) {
background-color: var(--bg);
}
.gantt-row:nth-child(even) .gantt-row-name {
background-color: var(--bg);
}
<div style="--bg: blue;">
<div class="gantt-row">odd</div>
<div class="gantt-row">even</div>
</div>
:first-child and :nth-child(1) not working
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
The correct selector is .contacts p:first-child
If you wanted it to work only based on the container and not know or care what it contains you could use .contacts > *:first-child
When you use it as you are on the container what you are actually asking for via css is an element with the class .contacts
that is the first child among it's sibling elements.
Related Topics
Opera and Custom Cursor in CSS
Make CSS Apply Only for Opera 11
Using Props to Set '&:Hover' Background-Color
How to Override Device Pixel Ratio
Bottom-Border Hover Transition
Using Bootstrap Icons with Button_To "Delete" in Rails 3
CSS Image Max-Width Set to Original Image Size
Sticky Navigation Element Jumps During Scroll
Differences Between Container, Row and Span in Bootstrap
How to Add a Company Logo to Shinydashboard Header (Not Mainpanel or Mainheader)
What Are Most Useful Media="Print" Specific, Cross Browser Compatible CSS Properties
How to Use a Data Attribute to Set a Background-Image in CSS
IE6 "Frame" Layout with 100% Height and Scrollbars
Codeigniter - Simple Base_Url Question
Css3 Fallback for Older Browsers
Change the CSS of the Qna Bot Embedded as Webchat
(Css) Make a Background Image Scroll Slower Than Everything Else