brld brld - 2 months ago 7
CSS Question

Styling the second "cite" in HTML--Cannot change HTML, or add JavaScript

I basically have 3 blockquotes with their appropriate citations, and I want to only style the second citation. It'd be easy normally, but this is part of an HTML exercise and I cannot modify any HTML (i.e. adding classes or ids) or add any JavaScript. I can only change the CSS (again for the sake of the exercise). The link to the JSFiddle is here: https://jsfiddle.net/gk0bwtvs/75/

I think I have it pretty close with the following CSS selector:

#left blockquote ~ blockquote cite {
color: brown;
font-weight: normal;
text-decoration: none;
}


This is doing what I think it should do--style all citations except the first one. However I want to take this one step further. I want to not style the last one, effectively styling the center one only. AGAIN: I cannot change any HTMl or add any JavaScript, otherwise this would be a cakewalk. I think something like the following should work, although in practice it doesn't:

#left blockquote ~ blockquote cite:not(cite+main) {
color: brown;
font-weight: normal;
text-decoration: none;
}


I think that should skip the first citation because of the General sibling selector, and the last one because of the exclusion of any citations next to a main element, but it does not work. Any ideas?

EDIT: I cannot use nth-child or nth-of-type selectors.

Thanks,

brld

Answer

Edit: since you can't use nth-* selectors, I would say use immediate sibling selectors, like so:

#left h2 + blockquote + blockquote cite { ... }

Options with nth-* selectors:

You could use the nth-child selector:

#left blockquote:nth-child(3) cite {
  color: brown;
  font-weight: normal;
  text-decoration: none;
}

Note, I used nth-child(3) because there is an element before the blockquotes. There is also a nth-of-type selector that you may wish to use, though I automatically default to nth-child for old compatibility.

Comments