Toggle CSS Property in Nested Elements

Question

Without using Javascript, is there a way to make the CSS property on and off through nested elements.

The problem I'm trying to solve is that I have several tags and classes that make the text in italics ( <em> , <blockquote> , <cite> , <q> , <dfn> and some other classes), and when one of them is inside the other of one of them, italicisation must be switched.

  <blockquote>
     And so the man said, <q> That not from <cite> Catcher In The Rye </cite>, dear
     fellow! </q>, can you believe that ?!
 </blockquote>

Should display as:

And this man said: “This is not from Zazerka in the rye, dear friend!”, Can you believe it ?!

The CSS I have for this gets a little messy:

 q, em, dfn, cite, blockquote { font-style: italic; } qq, q em, q dfn, q cite, em q, em em, em dfn, em cite, dfn q, dfn em, dfn dfn, dfn cite, cite q, cite em, cite dfn, cite cite, blockquote q, blockquote em, blockquote dfn, blockquote cite { font-style: normal; } 

... and I'm sure that even one level of nesting will not pass (as in my example).

Is there a way I can do this without having to list each tag permutation?

Answer 1

I could not tell you which browsers (if any) implement CSS3: not a pseudo-class, but if we see that it has ever been supported, we can do:

  q: not (q, em, dfn, cite, blockquote), 
 em: not (q, em, dfn, cite, blockquote), 
 dfn: not (q, em, dfn, cite, blockquote), 
 cite: not (q, em, dfn, cite, blockquote), 
 blockquote: not (q, em, dfn, cite, blockquote) {font-style: italic;  }

Is it possible to imagine how the browser will implement this when they do this, so it can work no more than 2 levels (for example, your example).

Other than that, unfortunately, I cannot come up with another pure CSS solution.

Answer 2

I would handle this with a script that generates the necessary nesting rules for each permutation. This is the only way I would not insanely support him.

Answer 3

In CSS3, a simple solution is possible:

 em { font-style: toggle(italic, normal); } 

Answer 4

You say that you have all kinds of elements that need to be displayed as italics, but after nesting they need to break the previous italication. I'm sorry to say that, but I'm really curious if this behavior is really needed.

Let me explain for myself: you have different markup, such as quote, quote, accent, etc. When using nested, the emphasis inside the quote should really have a different meaning than when used outside the quote. Therefore, css rules apply by default to everything under it. And therefore, I don’t understand the desire to smooth out your meaningful embedded markup in italics and non-italics, because it hides the main meaning of the content at hand (since similar formatting will be applied to various significant parts of the document).

My recommendation would be either:

• Suppose your markup exists for some reason, so leave the style as it is. The emphasis nested in blockquote should always have the style of the elements of its ancestor, because there is a reason for this nesting, and it should not be hidden visually for the user.
• Go to the requirements of your document and see if you really want such an attachment. If not, a generic HTML editor may not be enough for your needs, and you might be better off using an XML format that validates a specific scheme, which in your case would prohibit the use of some elements in others. Then, use an xml editor such as Xopus or XmlSpy to edit the document.

Sorry if this is not a direct solution to your question, but I hope I can give you another perspective regarding the problem and possibly see that there can be no problem at all. Good luck