Responsive webhelp: special font-style to elements with attributes outputclass

[pieterjan_vdw]

I am trying to publish some dita topics to responsive webhelp and ran into a problem with the following and similar titles:

<title><msgnum outputclass="mmpdf:fontDef:nofontdef">3.1</msgnum>&nbsp;<msgph conkeyref="display_messages/txt_clean_0" outputclass="mmpdf:fontDef:nofontdef"/></title>

This is what I want:
the <msgnum> and <msgph> elements need to have a special font-style in body text, but no when it's a title. Now the special font-style is standard is both in body text and titles.
When it's a title it should just inherit the style of the title.

I am publishing this content also with MiramoPDF and already added a special outputclass attribute to the element. I could add a second attribute to outputclass nofontdef and then add this to CSS and this works.

.msgnum.nofontdef{
font-style:inherit}

However I would like to avoid to use two different attributes to outputclass. How can I solve this?

I already tried the following, but CSS doesn't recognises the ':' in this case:

.msgnum.mmpdf:fontDef:nofontdef{
font-style:inherit}

Thanks for the help. Any suggestion is welcome.

[Costin]

Hi pieterjan_vdw,

What you already tried is a good solution.
However, if not avoid using ":" at all, you should make sure that you escape the colon sign in the CSS selector from your custom CSS, otherwise the ":" would be considered as the beginning of a pseudo-element, resulting an invalid CSS selector.

More specific, instead of

Code: Select all

.msgnum.mmpdf:fontDef:nofontdef{

font-style:inherit}

you should use
.msgnum.mmpdf\:fontDef\:nofontdef{
font-style:inherit}

I hope this helps.

Regards,
Costin

[pieterjan_vdw]

Hi Costin,

This works indeed partly for what I want to achieve, but I am still rather new to CSS and have an additional question.

I want this code to inherit the style of topictitle1 instead of the style of msgnum in HTML5. How can I get this in CSS?

.msgnum.mmpdf\:fontDef\:nofontdef{
font-style:inherit}