@Alex-Archer-I
Posted
Hi!
I can't see in your work any pseudo-classes or span
elements, so I can't help with a specific example, but I can explain you a basic syntax.
Pseudo selector nth-child()
can select one or more elements from the group of siblings. For example, you have an article.
<article>
<p>Interesting Text</p>
<p>Wise Text</p>
<p>Boring Text</p>
</article>
And you want to save your readers from the boring part by making it painful to read.
p:nth-child(3) {
color: magenta;
}
Now the <p>Boring Text</p>
element is magneta. But keep in mind that this selector will look for every groups of siblings. So, in this case:
<article>
<p>Interesting Text</p>
<p>Wise Text</p>
<p>Boring Text</p>
</article>
<article>
<p>Fancy Text</p>
<p>Cool Text</p>
<p>Useful Text</p>
</article>
Both <p>Boring Text</p>
and <p>Useful Text</p>
will be bright magneta color.
Also as a parament for this selector you can use odd
and even
to select all corresponding elements.
There are also nth-last-child()
selector which selects from the end, and first-child
and last-child
- more simplest versions.
Hope that helps =)
Marked as helpful
@iamkevin-sz
Posted
@Alex-Archer-I thanks βΊπ₯
@Alex-Archer-I
Posted
@iamkevin-sz
You're welcome. Alas, I can't tell why they didn't work in your project, so fell free to ask if you have some concrete example or anything else =)
Marked as helpful