Question

with this

a:nth-child(n)::before
{
    content: "› ";
}

a:nth-child(n+1)::before
{
    content: "›› ";
}

a:nth-child(n+2)::before
{
    content: "››› ";
}

a:nth-child(n+3)::before
{
    content: "›››› ";
}

a:nth-child(n+4)::before
{
    content: "››››› ";
}

i am trying to get

› a1

›› a2

››› a3

›››› a4

››››› a5

but its not working… need help with this, have also tried just using 1,2,3,4,5 instead of n+1, etc… but that also doesn’t work.

Answer 1

What you’re already doing should work, even if it’s probably not the best way to do it.

Here’s a edited version working:

a {
    display:block;
}
a:nth-child(1):before {
    content: "› ";
}
a:nth-child(2):before {
    content: "›› ";
}
a:nth-child(3):before {
    content: "››› ";
}
a:nth-child(4):before {
    content: "›››› ";
}
a:nth-child(5):before {
    content: "››››› ";
}​

With this HTML:

<a href="#">1</a><a href="#">2</a>
<a href="#">3</a><a href="#">4</a>
<a href="#">5</a>​

But won’t work with this:

<a href="#">1</a><a href="#">2</a>
<a href="#">3</a><a href="#">4</a>
<div>5</div>
<a href="#">6</a>​

So, unless your layout is exactly the first one, you probably want to use nth-of-type.

You can also use a single colon :before