How to put different styles on two identical <cite> elements?

Question

I have it

<p>
     <cite>One</cite><cite>Two</cite>
</p>

Is there a way in css to say that the first cite will be in bold and the second italic, without editing the above code ?

Answer 1

With CSS3, you can accomplish this with the following style:

cite:nth-child(1) { font-weight: bold; }
cite:nth-child(2) { font-style: italic; }

CSS3 is currently pretty weakly supported, so check out the browsers you decide to support.

Answer 2

p > cite { font-weight: bold }
p > cite + cite { font-style: italic }

But be careful that it will not work in IE6. You can use jquery to apply css3 rules in ie6. There is also an IE7 script , but it is a bit slow.

Answer 3

- first-child, -.

p cite:first-child { font-weight: bold; font-style: normal; }
cite { font-style: italics; }

Answer 4

There are ways to do this using CSS, but it will not be compatible with IE6. As long as you agree with this, you can do this:

p cite {
    font-weight: bold; 
}

p cite + cite {
    font-style: italic; 
    font-weight: normal;
}

The reason for this is that '+' chooses the brother of any of the quotes given. Since the relationship between the sisters goes only forward in the DOM, you will only select the second (or nth, where n> 1) cite tag.

Unfortunately + does not work with IE6.

Answer 5

p cite:first-child {
    font-weight: bold;
}
p cite:last-child {
    font-style: italic;
}