Is nth-of-type (2) targeting the first type?
I have a relatively modular page, but due to the CMS, the content for some of these paragraph blocks does not fill the entire block, so I just want to increase the font size for some of the blocks. However, when I try to target 2 and 3, it doesn't seem to recognize it at all. In fact, it only targets the first, and in my inspector, it talks about it because it applies the rule for 2.
Example HTML
<div class="container">
<div class="item video">
<!-- HTML for video stuffs-->
</div>
<div class="item copy">
<h1>Example Title</h1>
<p>Example words</p>
</div>
<div class="item photo">
<!-- HTML for photo stuffs-->
</div>
<div class="item video">
<!-- HTML for video stuffs-->
</div>
<div class="item copy">
<h1>Example Title</h1>
<p>Example words</p>
</div>
<div class="item photo">
<!-- HTML for photo stuffs-->
</div>
<div class="item video">
<!-- HTML for video stuffs-->
</div>
<div class="item copy">
<h1>Example Title</h1>
<p>Example words</p>
</div>
<div class="item photo">
<!-- HTML for photo stuffs-->
</div>
<div class="item video">
<!-- HTML for video stuffs-->
</div>
<div class="item copy">
<h1>Example Title</h1>
<p>Example words</p>
</div>
<div class="item photo">
<!-- HTML for photo stuffs-->
</div>
</div>
Now my LESS file looks like this:
.container {
.item {
&.copy {
p {
font-size: 16px;
}
&:nth-of-type(2), &:nth-of-type(3) {
p {
font-size: 17px;
}
}
}
}
}
In theory, the paragraph text in the first and fourth .copy blocks should have a font size of 16px, and the second and third blocks should be 17px. However, I can see that they are all 16px and the first one is 17px, and he hinted that this is because the rule for .container.item.copy: nth-of-type (2) p "is overwriting it.
Why is the nth-of-type (2) rule meant for the first block of that type and not the second? And why doesn't the nth-of-type (3) rule target the second block of that type, if that's the way it calculates them? I am so confused about what is going on here ... Any help is greatly appreciated.
source to share
: nth-of-type searches among items of the type of the selected class (".item.copy"). The element is a div, so the css rule was applied to the div at the html outline level.
The solution uses nth-child, which searches for all elements with a given class (".item.copy") at the html structure level. It can be used to select almost every repeating pattern. This is because you can write it like this:
.item:nth-child(2n - 1) {} // This targets 1st, 3rd, 5th, 7th,...
Just be careful with the level in the HTML structure. There's a common mistake when there are links (always one link in li) nested within li elements, then when you want to target every second link you need to write it like this:
ul li:nth-child(2n) {
a {
//style the link
}
}
There is a very useful function for using the nth-child selector: https://css-tricks.com/examples/nth-child-tester/
source to share
So, I looked at this answer , but I didn't quite understand it until I read this one .
The "nth-of-type" rule does not work with classes; it only looks at the element type. So the reason my first .copy block was targeting the nth-of-type (2) rule was because it was the second div.
Too bad there is no simple equivalent for classes. If there is, please let me know!
Thanks everyone!
Edit: As for the solution, I just targeted &: nth-child (5), &: nth-child (8). Since they are all at this level, the nth-of-type is unnecessary. Fortunately, the location of this page is hardcoded, so these indexes will not change anytime soon. If there were, I would probably target them to JavaScript and apply classes or something.
source to share
This is a useful cheat sheet for all W3schools CSS selectors (you can play with it): Try CSS Selector
Here's a short example that leads to the answer:
li:nth-of-type(2)
means:
All elements<li>
that are the second element of<li>
their parent.
source to share