CSS Question

Question

I have this

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

is there a way in css to say that the first cite is going to be bold and the second italics, without editing the above code?

Answer 1

You could use the :first-child pseudo selector although it is not cross-browser friendly.

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

Answer 2

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

But beware that it won't work in IE6. You might want to use jquery to apply css3 rules in ie6. There is also a script called IE7, but it's a bit slow.

Answer 3

With CSS3, you should be able to accomplish this with the following style:

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

CSS3 is pretty poorly supported at the moment, so check the browsers you decide to support.

Answer 4

There are ways to do it with CSS, but it won't be compatible with IE6. As long as you're okay with that, you could do this:

p cite {
    font-weight: bold; 
}

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

The reason this works is because '+' selects the sibling of any given cite. Since sibling relationships only go forwards in the DOM, you'll only select the second (or nth, where n > 1) cite tag.

Unfortunately + doesn't work with IE6.

Answer 5

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