How to select nth child of specific tag with css?
I'd suggest:
form p:nth-of-type(4) {
display: none;
}
JS Fiddle demo.
This will hide the fourth p
element, rather than the fourth-child (which is important as, in your HTML, the p
is the fifth-child).
And, just to demonstrate why :nth-child()
is the wrong selector, here's a demo showing the use of p:nth-child(4)
: JS Fiddle demo.
Incidentally, if that's the only element that contains a label
(which, given that the elements are nested within a form
seems an unlikely assumption), you could also use IE-friendly selectors:
p {
/* removes the visible-space left by empty p elements */
padding: 0;
margin: 0;
}
p > label {
/* hides the label element, and its contents */
display: none;
}
JS Fiddle demo.
References:
:nth-of-type()
.
How do I select nth element in a given set
Use the nth-child
selector:
span:nth-child(2) {}
This selects the first span since it's the second child. If you want to select the second span, you can use this instead:
span:nth-of-type(2) {}
You can also use first-child
, last-child
, nth-child(odd)
or nth-child(even)
, among others.
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>
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.
:nth-child related only to specific class or element
p:nth-of-type(3) {
background-color:red;
}
Will select only third <p>
element :) , was this your question ?
see http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:nth-of-type
your example : http://codepen.io/anon/pen/DxGos
nth-child() selector working only on select few elements
nth child, as explained here selects based on elements that are the nth child of their parents.
so 1 is working, because the first stroke is the first child.
3 works because the second stroke is the third child.
2 won't work, because there are no strokes that are 2nd children, just h2
Related Topics
Visited Links Color Not Changing in Ie 8
CSS: Are Class and Id Interchangeable
What Are The Various Ways to Hide a <Div>
CSS Percentage Widths and Heights and Resolution Problems
Breaking to a New Line with Inline-Block
Twitter Bootstrap 3 Modal with Scrollable Body
How to Make Popup Look at The Centre of The Screen
How to Select Element with Specific Content or Attribute in CSS
Can a Div Fill Up The Entire Viewport with a Pixel-Based Margin, Not Using The CSS3 Calc Property
CSS @Font-Face Not Working with Firefox
CSS Can't Seem to Set Height to 100% of Parent Container