5

I have a relatively modular page but due to the CMS, the content for some of these paragraph blocks don't fill up the whole 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 targets only the first one, and in my inspector, it says its because it's applying 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;
                }
            }
        }
    }
}

Theoretically, the paragraph text in the first and fourth .copy blocks should have a font size of 16px, while the second and third blocks should be 17px. However, what I'm seeing is that all of them are 16px and the first one is 17px, with it highlighted saying that it's because the rule for ".container .item.copy:nth-of-type(2) p" is overwriting it.

Why is the nth-of-type(2) rule targeting the first block of it's type and not the second? And why isn't the nth-of-type(3) rule not targeting the second block of it's type if that's how it's calculating them? I'm so confused as to what's happening here... Any help is much appreciated.

AuRise
  • 2,253
  • 19
  • 33

3 Answers3

6

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 type of element. So the reason why my first .copy block was being targeted with the nth-of-type(2) rule was because it was the second div.

Too bad there isn't a simple equivalent for classes. If there is, please let me know!

Thanks everyone!

Edit: As for a solution, I just targeted &:nth-child(5), &:nth-child(8). Since they're all divs on that level, nth-of-type was not necessary. And fortunately, the layout of this page is hardcoded, so those indices won't be changing anytime soon. If they were, I'd probably target them through JavaScript and apply classes or something.

Community
  • 1
  • 1
AuRise
  • 2,253
  • 19
  • 33
3

This is a useful cheat sheet for all of the CSS selectors by W3schools (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 <li> elements that are the second <li> element of their parent.

FlySoFast
  • 1,854
  • 6
  • 26
  • 47
2

:nth-of-type seeks among the elements of type of the given class selected (".item.copy"). The element is a div so the css rule was applied to div in the html structure level.

The solution is using :nth-child which seeks for all elements with a given class (".item.copy") in the html structure level. It can be used to select almost every repeated pattern. That's because you can write it for example 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 a li) nested in li elements, then when you want to target every second link, you have to write it like this:

ul li:nth-child(2n) {
    a {
        //style the link
    }
}

For using nth-child selector, there is a very useful feature: https://css-tricks.com/examples/nth-child-tester/

Jaromír Šetek
  • 478
  • 2
  • 8