How can I select an nth child without knowing the parent element?
How would
:first
be different from:first-child
? Every HTML element is a child of some other element in the DOM except<html>
which is the root element. – BoltClockIt'd be since you don't know the parent element. – fomicz
You don't need to know the parent element for :first-child
or :nth-child()
to work. They will just work, even if you don't specify the parent element.
The following selector is guaranteed to match any appropriate .select-me
element regardless of what its parent element is:
.select-me:nth-child(2)
How can I select an nth element without knowing the element in CSS?
If you want to select the first child of the <div>
you can use the following solution:
div > :first-child { color:red;}
<div> <p>Test #1</p> <div>Test #2</div></div>
Select nth element for elements that do not share the same immediate parent
Since :nth-child
and other similar selectors make matches based on sibling elements and CSS has no parent-wise selectors this isn't possible.
Less is simply a language that is compiled into CSS, it doesn't actually add any new features into CSS.
The easy alternative is to use Javascript.
How can I select an nth element without knowing the element in CSS?
If you want to select the first child of the <div>
you can use the following solution:
div > :first-child { color:red;}
<div> <p>Test #1</p> <div>Test #2</div></div>
nth-child not targeting the correct element?
It's because the nth-child
selector does not mean it's the nth of that specific class. It means that it's the nth sibling overall.
So the nth-child(2)
refers to your .reuinIt
class, however, it does not also have the .test
class and therefore it does not receive any styling.
Your last .test
class is the nth-child(4)
however that has no styling rules applied.
If you'd like to see a working example, I've updated your fiddle here.
EXAMPLES
The :nth-child
The important thing to remember here is that the :nth-child
selector specifically targets HTML elements based on their index/position inside their containers/parent elements.
Have a look at the example below and take note of how the corresponding commented :nth-child
selector's index continues to increment regardless of the type of element it's targeting.
<div id="container">
<h1>Heading 1</h1> <!-- h1:nth-child(1) -->
<p>Paragraph 1</p> <!-- p:nth-child(2) -->
<p>Paragraph 2</p> <!-- p:nth-child(3) -->
<h2>Heading 2</h2> <!-- h2:nth-child(4) -->
<p>Paragraph 3</p> <!-- p:nth-child(5) -->
</div>
The :nth-of-type
The cool thing about :nth-of-type
is that it ignores all of the other elements that are not of the same type, i.e. if the element you are targeting is a <p>
, it will ignore all of the surrounding "non-<p>
" elements when calculating its index.
The below example will provide you with a basic understanding of the indexing rules that :nth-of-type
follows:
<div id="container">
<h1>Heading 1</h1> <!-- h1:nth-of-type(1) -->
<p>Paragraph 1</p> <!-- p:nth-of-type(1) -->
<p>Paragraph 2</p> <!-- p:nth-of-type(2) -->
<h2>Heading 2</h2> <!-- h2:nth-of-type(1) -->
<p>Paragraph 3</p> <!-- p:nth-of-type(3) -->
</div>
A little more complexity with :nth-of-type
It is however very important to remember that :nth-of-type
bases it's indexing values on the HTML Element Type regardless of the CSS Class you are using to call the property.
Have a look at the below example:
<div id="container">
<h1>Heading 1</h1> <!-- h1:nth-of-type(1) -->
<p class="my-class">Paragraph 1</p> <!-- .my-class:nth-of-type(1) -->
<p>Paragraph 2</p> <!-- p:nth-of-type(2) -->
<h2 class="my-class">Heading 2</h2> <!-- .my-class:nth-of-type(1) -->
<p class="my-class">Paragraph 3</p> <!-- .my-class:nth-of-type(3) -->
<h1 class="my-class">Heading 3</h1> <!-- .my-class:nth-of-type(2) -->
</div>
This example is a little more complex, but it helps if you see CSS Declarations as a sort of filtering rule. For example, if create a CSS declaration by typing:
p:nth-of-type(2) {
background-color: red;
}
I am essentially telling the browser 2 things:
- Only
<p>
tags should be affected and, - Only if they are the second
<p>
tags amidst their siblings
The difficulty comes in when I write CSS that looks like this:
.my-class:nth-of-type(1) {
background-color: red;
}
By not specifying an element type, my rule essentially reads with the following filter:
- Only elements with the class
my-class
should be affected and, - Only if those elements are the first sibling of their type of elements.
If were to apply the above CSS to the HTML in the example (see fiddle for working example), we would get an output that looks like this:
In the output above, you'll see that both the first <h2>
and the first <p>
elements were affected regardless of whether or not their siblings had the my-class
class name applied.
Can you select the html element or root node with nth-child?
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo:
“The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.”
Is it possible to select nth-child(x) but only if it is not the last child?
You could use the :nth-child with :not to achieve what you need. here is an example.
ul li:nth-child(3):not(:last-child) { color: red;}
<ul class="sample1"> <li>Home</li> <li>Cat 1</li> <li>Subcat 1</li> <li>Product</li></ul>
<ul class="sample2"> <li>Home</li> <li>Cat 1</li> <li>Product</li></ul>
getting nth-child of parent
you need to use .closest('tr')
.. to select parent tr and .find()
to select td:nth-child(3)
$('td:nth-child(-n+2)').on("click", function(){
alert($(this).closest('tr').find('td:nth-child(3)').text());
});
Working Demo
Related Topics
Font Awesome 5 - Why Aren't Icons Like Bitcoin, Facebook, Twitter Showing
What Does "I" Mean in a CSS Attribute Selector
What Is the Purpose of the '@' Symbol in Css
Does Element Width Include Padding
Downloading a Google Font and Setting Up an Offline Site That Uses It
Ordering of Vendor-Specific CSS Declarations
Usage of Display Property of Flex Box Items
How to Vertically Align <Li> Elements in <Ul>
Sub-Pixels Calculated and Rendered Differently Among Browsers
How to Override the Properties of a CSS Class Using Another CSS Class
Why Should We Include Ttf, Eot, Woff, Svg,... in a Font-Face
Position a CSS Background Image X Pixels from the Right
How to Draw a Circle Sector in Css
What's the Difference Between CSS Classes .Foo.Bar (Without Space) and .Foo .Bar (With Space)
Css Selector to Select First Element of a Given Class