The CSS "Quote in a Quote" Issue

Question

I'm trying to find a solution to the following problem, if there is any.

Lets say the primary quote sign is a double top quote “ (start) and ” (end). And let's also say the secondary quote sign is a single top quote ‘ (start) and ’ (end).

Think about how a quote in a quote is shown.

The standard of writing quotes is, of course, alternating, like this.

“Double ‘single “double ‘single’ double” single’ double.”

Now, in HTML, you would write this:

<q>Double <q>single <q>double <q>single </q>double </q>single </q>double.</q>

But no, this won't work without applying CSS rules. I'm not going to use the :lang pseudo selector here, so I'm just leaving it without.

q:before,
q q q:before,
q q q q q:before { content: '“' }

q:after,
q q q:after,
q q q q q:after { content: '”' }

q q:before,
q q q q:before,
q q q q q q:before { content: '‘' }

q q:after,
q q q q:after,
q q q q q q:after { content: '’' }

You see where this is going, right? The qs add up and up.

So now there are two options: either I'm not seeing the logical way to select the q elements in the right order or it just isn't possible.

PS: I know it is very theoretical to have a quote in a quote in a quote in a quote in a quote.

possible duplicate of [CSS - alternate nested styles (not possible)](http://stackoverflow.com/questions/10055299/css-alternate-nested-styles-not-possible) — Jukka K. Korpela, Nov 18 '12 at 22:39

score 2 · Answer 1 · answered Nov 18 '12 at 21:39

2

There's no way to write a rule that catches the 1st, 3rd, 5th, etc. vs. 2nd, 4th, 6th levels of identical nested elements, recursively for any n levels.

Apart from the theoretical problem, you'd have to set classes and/or use javascript.

answered Nov 18 '12 at 21:39

Sean Redmond

3,974
22
28

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

I couldn't get this to work with just CSS selectors nth-child(odd) and nth-child(even) since they're nested, but it is possible using jQuery:

First define your CSS classes:

.e:before {content:'“'}
.o:before {content:'‘'}
.e:after {content:'”'}
.o:after {content:'’'}

Then use jQuery to add the class to every even/odd quote:

$("q:odd").addClass('o');
$("q:even").addClass('e');

Demo

Related questions:

edited May 23 '17 at 12:18

Community

1
1

answered Nov 18 '12 at 21:40

sachleen

30,730
8
78
73

Not a bad solution, but people should be careful because jQuery's `:odd` pseudo-selector doesn't work quite the way the CSS `:nth-child(odd)` does. – Sean Redmond Nov 18 '12 at 21:51
Right, which is what allows this solution to work. `$("q")` will give me all the quote elements and `:odd` will take the odd ones. The CSS selector only selects the odd elements at the same level under the parent. – sachleen Nov 18 '12 at 21:55
Thanks, now I also learned that the jQuery odd selector doesn't equal the CSS odd selector. Let's hope CSS4 will feature a selector like that natively. =) – reitermarkus Nov 18 '12 at 22:02
And it shouldn't. Given a list of elements, odd selects the odd ones. jQuery also has `nth-child()` which is the same as the CSS selector. CSS, on the other hand, does not have an `odd` selector, which is why we have to use jQuery for this. – sachleen Nov 18 '12 at 22:04
1

People need to remember that `:nth-child()` is called `:nth-child()` and not `:nth-element()` or `:nth()` for a reason. – BoltClock Nov 19 '12 at 05:25

BoltClock · Answer 3 · 2012-11-19T05:36:06.887

CSS2.1 has features designed specifically for handling quotation marks. The quotes property in particular has rudimentary support for nesting, but it can only support nesting to an arbitrary depth and not recursive or repeated nesting.

So while currently there isn't a CSS solution that covers all nesting levels, you can specify quotes as deeply as necessary while saving quite a few bytes from hardcoding nested :before and :after pseudo-elements in your selectors:

q { quotes: '“' '”' '‘' '’' '“' '”' '‘' '’' '“' '”' '‘' '’' '“' '”' '‘' '’'; }

/* 
 * These should already be in the default UA stylesheet per HTML specs
 * so you should not have to include them, but some older browsers may forget.
 */
q:before { content: open-quote; }
q:after { content: close-quote; }

You don't need to worry about browser support because it's pretty much the same for the HTML q element and the CSS quotes property as for :before and :after.

There aren't any CSS3 modules in active development yet that address this issue with quote generation, but hopefully we'll see something soon.

The CSS "Quote in a Quote" Issue

3 Answers3