Page 1 of 1
CSS Subject selector and form controls (selecting an element WHEN it does not have a specific child)
Posted: Tue May 03, 2022 2:15 pm
by catominor
Hi,
I am trying to create a Form using Form controls where a button appears only if a specific child element is missing.
My idea is to use the subject selector (
https://www.oxygenxml.com/doc/versions/ ... ector.html) and :not pseudo-selector. Unfortunately, I am obviously doing something wrong, hence I would like to ask you for help
.
I have the following code (TEI-XML):
Code: Select all
<titleStmt>
<respStmt><resp></resp><name></name><respStmt>
</titleStmt>
And I want to create a button when the <respStmt> element is missing.
I have tried the following:
Code: Select all
titleStmt:after!> :not(respStmt) { }
Unfortunately, this does not work and I don't know why (it shows the button all the time).
Any idea?
Thank you very much in advance!
Jan
Re: CSS Subject selector and form controls (selecting an element WHEN it does not have a specific child)
Posted: Tue May 03, 2022 6:43 pm
by Radu
Hi Jan,
This is not how the not() CSS selector works, some documentation about it here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
I would suggest this approach instead:
Code: Select all
titleStmt:after{
content: oxy_combobox(...);
}
titleStmt:has(respStmt):after{
content: "" !important;
}
So if the titleStmt has the respStmt child I just reset its after content.
Regards,
Radu
Re: CSS Subject selector and form controls (selecting an element WHEN it does not have a specific child)
Posted: Wed May 04, 2022 10:00 am
by catominor
Yes, this works!
Thank you very much!
I wonder if there is any way to utilize :has or :not in the way as I described, i.e. to select an element that does not have a specific child, something like negated :has?
Best,
Jan
Re: CSS Subject selector and form controls (selecting an element WHEN it does not have a specific child)
Posted: Wed May 04, 2022 10:37 am
by Radu
Hi Jan,
Here's the official CSS specification for the :not selector, it accepts very simple expressions inside it:
https://www.w3.org/TR/selectors-3/#negation
Maybe you can play a bit with an HTML and a CSS in a web browser.
For example a selector like this:
means that it applies on any element which does not have the name "FOO", so it does not mean that it applies on any element which does not have the child "FOO".
What you originally wanted would be something like "*:not(*! > childName)" but it's not supported in Oxygen and probably also not supported in a web browser.
Regards,
Radu
Re: CSS Subject selector and form controls (selecting an element WHEN it does not have a specific child)
Posted: Wed May 04, 2022 3:17 pm
by catominor
Dear Radu,
Thank you very much for all your answers!
Best,
Jan