Menu
I have the following HTML:
<section class="history">
<div class="asked">
<h1 class="user-show-tab-title">Questions</h1>
<div>
<ul class="question-index-false"></ul>
</div>
</div>
<div class="answered">
<h1 class="user-show-tab-title">Answers</h1>
<div>
<ul class="question-index-false"></ul>
</div>
</div>
</section>
I'm desperately trying to select and style the 2nd h1 element with the class "user-show-tab-title" (the one with "answers")
but for some reason .user-show-tab-title:nth-of-type(1) selects them both and .user-show-tab-title:nth-of-type(2) doesn't select anything.
What gives?
209
Basic example The selector looks at the type only when creating the list of matches. You can however apply CSS to an element based on :nth-of-type location and a class, as shown in the example above.
The :nth-of-type(n) selector matches every element that is the nth child, of the same type (tag name), of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.
As a general rule, if you want to select an interval of a selector regardless of the type of element it is, use nth-child . However, if you want to select a specific type only and apply an interval selection from there, use nth-of-type .
The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
That's because they are both the first of type h1 within a div. nth-of-type applies only to immediate child relationship.
Also note that the nth related selectors start at 1, so to select the second you would use 2, not 1.
I don't know your actual HTML, but for what you have, you can just use
.answered .user-show-tab-title
If you really want to use nth-of-type, here's how you can use it. I'm inserting some dummy <p>s otherwise, all the children of <section> would be of the same type.
.history div:nth-of-type(1) .user-show-tab-title {
background-color: lightblue;
}
.history div:nth-of-type(2) .user-show-tab-title {
background-color: #eee;
} <section class="history">
<p>Dummy paragraph</p>
<p>Dummy paragraph</p>
<div class="asked">
<h1 class="user-show-tab-title">Questions</h1>
<div>
<ul class="question-index-false"></ul>
</div>
</div>
<p>Dummy paragraph</p>
<p>Dummy paragraph</p>
<p>Dummy paragraph</p>
<div class="answered">
<h1 class="user-show-tab-title">Answers</h1>
<div>
<ul class="question-index-false"></ul>
</div>
</div>
</section>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
