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.

Answer 1

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:

• CSS refer to every odd nested child?
• querySelector with nested nth-child in Chrome doesn’t appear to work