css - How to find certain class name elements in a specified order

Question

<p class="item2">
    <p class="tcc">
        <p class="icon">
        </p>
        <p>2017.07.07</p>
    </p>
    <p class="link">
    </p>
    <p class="tcc">
        <p class="icon">
        </p>
        <p>12个月</p>
    </p>
    <p class="link">
    </p>
    <p class="tcc">
        <p class="icon">
        </p>
        <p>2017.07.08</p>
    </p>
</p>

I want to pass

item2 .tcc:nth-of-type(2) .icon{}

Why is it invalid to add a style to the second tcc class name element? I thought about it later, do all pseudo-class selectors like nth-of-type require element tags before them? The tutorials on the Internet seem to be all about it, can't it be a class name?

Answer 1

Because <p class="link"></p> is also p, so the second tcc is actually nth-of-type(3)

Answer 2

Not to mention whether nth-of-type needs to be explicitly specified, :nth-of-type(n) refers to selecting the nth child element with the specified type in the parent element, and your second .tcc is the 3rd child element of .item2, not the 2nd. Maybe you should write it as .item2 .tcc:nth-of-type(3) .icon {}

Answer 3

item2 .tcc:nth-of-type(2) .icon{}

replaced with

item2 .tcc:nth-child(3) .icon{}