:root CSS 3 Selector

[SSC]

Hello,

do you have something similar to the :root CSS 3 Selector (http://www.w3schools.com/cssref/sel_root.asp)?

I did not find something similar here:
http://oxygenxml.com/doc/ug-editor/topi ... uthor.html

What I actually want to achieve with that is to do a

Code: Select all

:root{

    counter-reset: heading-level-1;

}

..., because unfortunately the counter-increment: heading-level-1; has no effekt without resetting the heading-level-1 for the first time.

Any idea?

Best regards,

Simon

[Radu]

Hi Simon,

Oxygen does not support the :root CSS 3 selector, we'll see if we can support this in a future version.
Why don't you match the root element directly by using its name?

You could also use a trick to match it regardless of the root node name, something like:

Code: Select all

@namespace oxy url('http://www.oxygenxml.com/extensions/author');

/*And match the root element, the child of the document*/

oxy|document * {

    

}

Regards,
Radu

[SSC]

Hello Radu,

Why don't you match the root element directly by using its name?

1. The name of the root element can be different, but though I´d like use the same CSS file for it
2. The different names of the root element can also be nested in the children of the root element

You could also use a trick to match it regardless of the root node name, something like:

Code: Select all

@namespace oxy url('http://www.oxygenxml.com/extensions/author');

/*And match the root element, the child of the document*/

oxy|document * {

    

}

Code: Select all

@namespace oxy url('http://www.oxygenxml.com/extensions/author');

/*And match the root element, the child of the document*/

oxy|document * {

    counter-reset: heading-level-1;

}

This also results in the issue that the heading-level-1 variable is not being incremented by counter-increment: heading-level-1;

Best regards,

Simon

[Radu]

Hi Simon,

The trick should have worked.
Maybe you could prepare a small XML and CSS in which the counters are not properly incremented and I could take a look at the situation. Maybe the counter problem is somewhere else in the CSS.

Regards,
Radu

[SSC]

Hello Radu,

here is the XML :

Code: Select all

<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/css" href="headings.css"?><!DOCTYPE document PUBLIC "-//CUSTOM//DTD PI-Mod Document V1.2.2//EN" "document-custom.dtd">

<document><chapter><heading>First Chapter</heading><task><heading>Test</heading><task><heading>SubTask</heading></task></task><task>

            <heading>Another task</heading>

            <task_body>

                <action>

                    <step>Und läuft</step>

                </action>

            </task_body>

        </task><task><heading>TestTask</heading></task><task><heading>Second Test Task</heading></task><task><heading>Third Task</heading></task></chapter><chapter><heading>Second Chapter</heading><task><heading>First Task of Second Chapter</heading></task><task></task><task><heading>Second Task of Second Chapter</heading></task></chapter><chapter><heading>Third Chapter</heading><task><heading>First task of third chapter</heading></task></chapter></document>

and here the CSS for the headings:

Code: Select all

heading {

    color: #4682B4;

    display: block;

    font-weight: bold;

    margin-bottom: 3px;

    margin-top: 5px;

    text-align: left;

}



/*** // H1 ***/

*>heading:before,

document>*>heading:before

{

    content: counter(heading-level-1) ' ';

}

*>heading,

document>*>heading

{

    counter-increment: heading-level-1;

    counter-reset:     heading-level-2;

    font-size: 150%;

    margin-bottom: 10px;

}



/*** // H2 ***/

*>*>heading:before,

document>*>*>heading:before

{

    content: counter(heading-level-1) '.' counter(heading-level-2) ' ';

}

*>*>heading,

document>*>*>heading

{

    counter-increment: heading-level-2;

    counter-reset:     heading-level-3;

    font-size: 135%;

    margin-bottom: 8px;

}



/*** // H3 ***/

*>*>*>heading:before,

document>*>*>*>heading:before

{

    content: counter(heading-level-1) '.' counter(heading-level-2) '.' counter(heading-level-3) ' ';

}

*>*>*>heading,

document>*>*>*>heading

{

    counter-increment: heading-level-3;

    counter-reset:     heading-level-4;

    color: #000000;

	  font-size: 125%;

    margin-bottom: 5px;

}



/*** // H4 and more ***/

*>*>*>*>heading:before,

document>*>*>*>*>heading:before

{

    content: '';

}

*>*>*>*>heading,

document>*>*>*>*>heading

{

    counter-increment: heading-level-4;

	  color: #000000;

	  font-size: 115%;

    margin-bottom: 3px;

}

For this document using document{ counter-reset: heading-level-1;} does the trick, but as I said there also can be other root elements.

The problem here is that the heading-level-1 does not increase, so that every first level heading has a 1 before the heading.
But actually it should be 1 -> 2 -> 3....

It seems that without the counter-reset: heading-level-1; beforehand the counter-increment: heading-level-1; does not work properly. I tested this in the Oxygen Editor and as well in the Firefox browser. Both do not increase without former counter-reset.

Best regards,

Simon

[Radu]

Hi Simon,

It seems that without the counter-reset: heading-level-1; beforehand the counter-increment: heading-level-1; does not work properly. I tested this in the Oxygen Editor and as well in the Firefox browser. Both do not increase without former counter-reset.

Yes, resetting the counter is very important and must be done. According to the CSS 2.1 specs:

The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants.

The workaround I gave you with the oxy|document indeed does not work, sorry for not testing it first.
For now you will have to match all possible root elements by specifying their element names.

Regards,
Radu

[SSC]

Hello Radu,

thanks for your efforts.

So I will have to use different CSS files for every document according to its root element.
But the problem with that is the fact that the root element in some cases may also occur as a child element, which then also increases the counter.

Could you there please consider the add the :root CSS3 selector for the css. (Maybe in 14.2 )
Using the :root CSS3 selector works great, when opening the XML document with Firefox.

Best regards,

Simon

[Radu]

Hi Simon,

I added support for the E:root CSS 3 selector and it will be available in version 14.2.

Regards,
Radu

[Radu]

Hi Simon,

Oxygen 14.2 was just released and should contain the enhancement I mentioned.

Regards,
Radu