Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

List of selectors throwing "Bad CSS Selectors". #77

Open
FanaticPythoner opened this issue Dec 30, 2022 · 6 comments
Open

List of selectors throwing "Bad CSS Selectors". #77

FanaticPythoner opened this issue Dec 30, 2022 · 6 comments

Comments

@FanaticPythoner
Copy link

FanaticPythoner commented Dec 30, 2022

Here is a list of CSS selectors which should work, but instead throw "Bad CSS Selectors". I'm using selectolax.parser.HTMLParser with no other parameter than the HTML to parse, as well as the HTMLParser.css() function.

.comment-list>li
.comment-list>li ol.children
.comment-list>li ol.children li
.comment-list>li ol.children li:last-child
.comment-list>li:not(:last-child)
.comment-list>ol
.figure-post>*:first-child
.figure-post>*:last-child
.figure-post__media>a
.figure-post__media>a img
.figure-post__media>a img
.figure-post__content>*:first-child
.figure-post__content>*:last-child
[data-arts-theme-text=light] .widget_nav_menu ul.menu>li a, .arts-elementor-theme-light .widget_nav_menu ul.menu>li a
.header_sticky.bg-dark-1, .header_sticky.bg-dark-2, .header_sticky.bg-dark-3, .header_sticky.bg-dark-4, .header_sticky .menu>li>a
.input-float__input_focused+.input-float__label, .input-float__input_not-empty+.input-float__label
.input-float__input_focused+.input-float__label
.trp-language-switcher>div>a
.menu>li
.menu>li:not(:last-child)
.menu>li a
.menu .menu-item-has-children>a~ul
.menu .sub-menu>li
.menu .sub-menu>li a
.menu .sub-menu>li a
.menu-overlay>li
.menu-overlay>li>a
.menu-overlay .sub-menu>li
.menu-overlay .sub-menu>li>a
.modal-footer>:not(:first-child)
.modal-footer>:not(:last-child)
.post__content>*:first-child, .post__comments>*:first-child, .section-content__heading>*:first-child, .section-content__text>*:first-child
.post__content>*:last-child, .post__comments>*:last-child, .section-content__heading>*:last-child, .section-content__text>*:last-child
.post__content ul:not(.wp-block-gallery) li>span, .post__comments ul:not(.wp-block-gallery) li>span, .section-content__heading ul:not(.wp-block-gallery) li>span, .section-content__text ul:not(.wp-block-gallery) li>span
.post__content ol:not(.comment-list) li>span, .post__comments ol:not(.comment-list) li>span, .section-content__heading ol:not(.comment-list) li>span, .section-content__text ol:not(.comment-list) li>span
.post__content>ul, .comment-content>ul, .section-content__heading>ul, .section-content__text>ul
.section-masthead[data-arts-os-animation]:not([data-arts-os-animation=animated])>*
.section-masthead__meta-item>*
[data-arts-theme-text=light]:not([data-arts-header-overlay-theme-text=dark]) .split-text:not(.js-split-text) .has-drop-cap>div:first-child, .arts-elementor-theme-light .split-text:not(.js-split-text) .has-drop-cap>div:first-child
[data-arts-theme-text=light]:not([data-arts-header-overlay-theme-text=dark]) .input-float__input_focused+.input-float__label, .arts-elementor-theme-light .input-float__input_focused+.input-float__label
.split-text:not(.js-split-text) .has-drop-cap>div:first-child
.split-text:not(.js-split-text) .has-drop-cap>div:first-child:after
.pt-small.offset_bottom .section-offset__content, .pt-small.offset_bottom>.elementor-container
.pt-medium.offset_bottom .section-offset__content, .pt-medium.offset_bottom>.elementor-container
.pt-large.offset_bottom .section-offset__content, .pt-large.offset_bottom>.elementor-container
.pb-small.offset_top .section-offset__content, .pb-small.offset_top>.elementor-container
.pb-medium.offset_top .section-offset__content, .pb-medium.offset_top>.elementor-container
.pb-large.offset_top .section-offset__content, .pb-large.offset_top>.elementor-container
.widget_nav_menu ul.menu>li
.widget_nav_menu ul.menu>li a
.widget_nav_menu ul.menu>li a:after, .widget_nav_menu ul.menu>li a:before
.widget_nav_menu ul.menu>li a
.widget_nav_menu ul.menu>li.menu-item-has-children
.widget_nav_menu ul.menu>li.menu-item-has-children a:after
.widget_nav_menu ul.sub-menu>li
.widget_nav_menu ul.sub-menu>li>a
.widget_nav_menu ul.sub-menu>li>a
.widget_rss ul>li
.widget_rss ul>li:last-child
.widget_icl_lang_sel_widget .wpml-ls-legacy-dropdown a, .widget_icl_lang_sel_widget .wpml-ls-legacy-dropdown a, .widget_icl_lang_sel_widget .wpml-ls-legacy-dropdown .wpml-ls-current-language>a
.widget_text .textwidget>p

@rushter
Copy link
Owner

rushter commented Dec 30, 2022

Please use spaces between > as recommended in CSS specification.

@lexborisov
Copy link

@FanaticPythoner

Please see white-space in selectors.
But, in the last lexbor version "combinators" normal work without whitespaces.

@FanaticPythoner
Copy link
Author

I understand that. It is still, however, my strong belief that these cases should still be handled by the library, as it is far from everyone that follows best practices. Moreover, people, such as me, obtaining those selectors via parsing the CSS files in a given web page don't have control over whether or not the person who made the CSS declarations in said CSS files followed good practices.

@FanaticPythoner
Copy link
Author

@rushter @lexborisov

@FanaticPythoner
Copy link
Author

In the meantime, for those reading this thread, you can simply do something like that in your code prior to calling HTMLParser.css():

chars_to_patch = [
    '>',
    '+',
    '~'
]
                    
for c in chars_to_patch:
    c_spaces = ' ' + c + ' '
    if c in selector_str and c_spaces not in selector_str:
        selector_str = selector_str.replace(c, c_spaces).replace('  ', ' ')

@rushter
Copy link
Owner

rushter commented Jan 6, 2023

I understand that. It is still, however, my strong belief that these cases should still be handled by the library, as it is far from everyone that follows best practices. Moreover, people, such as me, obtaining those selectors via parsing the CSS files in a given web page don't have control over whether or not the person who made the CSS declarations in said CSS files followed good practices.

I can't fix it on my side. Adding whitespaces by using similar approach to yours is risky, so we need this to be fixed in the Modest engine.
Is there anything that stops you from using the lexbor backend instead? It's an improved version of the parser, but it's not 100% compatible with the modest.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants