Excluding an element from nth-child pattern
nth-child
selector just counts any child nodes, so .class1:nth-child(4)
means 'element that is the 4th child of the container and has class1
class', not 'the 4th element with that class in the container'. The nth-of-type
selector can select only elements of the specific type (tag name), so you can, e.g., count dt
elements separately from dd
elements in a dl
list. There is nth-child(4 of .class1)
syntax in CSS Selectors 4 draft, but it's currently supported only in the latest versions of Safari.
With the CSS supported by most browsers, you can 'reset the counter' after the element you want to exclude from counting and 'start the new counter' for the remaining part of the list:
.class1:nth-child(4n) {
list-style-type: circle;
}
.class1.class2, .class2 ~ .class1:nth-child(4n) {
list-style-type: disc;
}
.class2 ~ .class1:nth-child(4n + 1) {
list-style-type: circle;
}
and so on (see updated fiddle).
Alternatively, you can change the markup and use different tags instead of classes and nth-of-type
.
Css nth-child ignore divs - javascript nth-child equivalent for cousin elements
:nth-child()
and :nth-of-type()
operate on siblings, so targeting all of the p
's on the page together won't work because they aren't siblings.
To target that paragraph, I would target the div
you want and use :nth-child()
inside of that div
to select the p
relative to its siblings.
#yellow div:last-child p:first-child { background-color: yellow;}
<div id="yellow"> <div> <p>This should not be yellow.</p> <p>This should not be yellow.</p> </div>
<br>
<div> <p>This should be yellow.</p> <p>This should not be yellow.</p> </div> </div>
CSS pseudo classes ordering :nth-child and :not
AFAIK, nth-child
works on element positions or index. So, even if you hide the element, the other element positions/indexes doesn't change.
I think your better option here is to do this completely with jQuery as I shown below as just an example:
$(function () {
$('.list li:not(.hidden):odd').addClass('paint');
$('.hide_some').click(function () {
$('.list li').eq(0).addClass('hidden');
$('.list li').eq(2).addClass('hidden');
$('.list li').eq(5).addClass('hidden');
// again remove the paint
$('.list li').removeClass('paint');
// again add new paint
$('.list li:not(".hidden"):odd').addClass('paint');
})
})
Working Fiddle
Specifying a list of arbitrary children (no pattern) for nth-child and nth-of-type
Unfortunately there isn't. Neither Selectors 4 nor CSS Syntax 3 have extended the An+B notation to allow a list of such expressions as in your 1,3,7,10
example either, though I wonder if it may be worth suggesting as it seems pretty doable. In fact, I just went ahead and suggested this (I couldn't find any earlier proposals using either the mailing list search, or Google).
The closest to a solution that Selectors 4 offers is via the :matches()
pseudo, which makes it so that the only bit you have to repeat is :nth-child(...)
:
.study_references td:matches(
:nth-child(1), :nth-child(3), :nth-child(7), :nth-child(10)
) { ... }
But this is still far from ideal, and is not yet implemented anyway.
If you can suss out at least part of a pattern from most of the numeric indices you're looking for, you could modify this pattern as necessary using :not()
and/or additional :nth-child()
/:nth-last-child()
and still pick up the right elements. See this answer of mine where I refactor [9, 11, n+12] into [n+9 except 10]. However this is likely more trouble than it's worth, and the resulting selector will almost always be far from elegant unless you get really lucky as I did above.
Using CSS nth-child to select irregular pattern in sequence
Using nth-child(4n+0)
and nth-child(4n+1)
in combination should select the required elements.
1, 4, 5, 8, 9... would be selected by the above combination while the other sequence is the remaining items. So set the 30% width as default and over-ride to 70% on the selected nth-child
combinations.
div{ background: green;}div:nth-child(4n+0),div:nth-child(4n+1){ background: 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><div>17</div><div>18</div><div>19</div><div>20</div><div></div>
Can I use Nth-child to skip the first item then select 2 skip 2?
I'm not aware of any single-rule way to do it, but you can always just target two separate patterns with the same rule:
:nth-child(4n+2),
:nth-child(4n+3) {
background: black;
}
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.
Related Topics
Are Margin and Padding Most Disbalanced Thing Among All Browser
Why Can't Inline Elements Be Transformed
Animate Text Fill from Left to Right
CSS Keep All Flexbox Children Elements the Same Size
Css: Before/After Content with Title
Safari and Chrome Ignore Min-Width CSS Propery
How to Override Max-Width for Specific Div
Overflow:Hidden on Body Is Broken in iOS6
Which Screen Reader Would Be Best to Test Site Accessibility and How to Configure That
How to Hide a <Select> Arrow in Firefox 30+
How to Use Pseudo-Elements (:After, :Before) Inside a Table Row
How to Hide Only the First Element of a Type
Break Line on White Space Between Words
How to Evenly Distribute Menu Items with CSS When Width and Quantity Is Not Known
Consistently Sizing a <Textarea> Under Ie, Ff, Safari/Chrome
Why Does Container Div Insist on Being Slightly Larger Than Img or Svg Content