Can't select with nth-child
Hi, I just started a project and I'm having a problem with the following code:
HTML
CSS
The problem is that the nth-child pseudoclass does not select neither the h1, nor the h2. This is because (for some reason) h1 has position 2 (i.e. I can select it by typing nth-child(2)) and h2 has position 3 (same thing). It's like there's a ghost element with the class "title" that there's breaking my styles. If someone knows what's going on here plz explain me, I would appreciate it a lot!
2 Replies
:nth-child
works a little differently. It will start counting from the first child element, which in your case is the <h3>
.
Your <h3>
has no .title
class, so the style isn't applied.you're probably looking for :nth-of-type https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
also, just as a pointer, it looks like you're using h-tags as a way to have different sized text. You should only use them when they have semantic meaning, and a level-3 tag doesn't make sense unless you have level 1 and 2 above it