Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

What are the rules for ordering pseudo-states?



  • I was surprised to find that the two snippets below gave different results, I thought order shouldn't matter, does it? I can't find docs on the order rules or understand why the second snippet is wrong, all I did was move :horizontal to be the first pseudo-state instead of second.

    a5a8516c-20e1-4065-8ede-5d9d2cb35626-image.png

    QScrollBar:horizontal {
        border: 2px solid grey;
        background: #32CC99;
        height: 15px;
        margin: 0px 20px 0 20px;
    }
    QScrollBar::handle:horizontal {
        background: white;
        min-width: 20px;
    }
    QScrollBar::add-line:horizontal {
        border: 2px solid grey;
        background: #32CC99;
        width: 20px;
        subcontrol-position: right;
        subcontrol-origin: margin;
    }
    
    QScrollBar::sub-line:horizontal {
        border: 2px solid grey;
        background: #32CC99;
        width: 20px;
        subcontrol-position: left;
        subcontrol-origin: margin;
    }
    

    0c178a12-10cf-4401-8509-e3ff295786b9-image.png

    QScrollBar:horizontal {
        border: 2px solid grey;
        background: #32CC99;
        height: 15px;
        margin: 0px 20px 0 20px;
    }
    QScrollBar:horizontal::handle {
        background: white;
        min-width: 20px;
    }
    QScrollBar:horizontal::add-line {
        border: 2px solid grey;
        background: #32CC99;
        width: 20px;
        subcontrol-position: right;
        subcontrol-origin: margin;
    }
    
    QScrollBar:horizontal::sub-line {
        border: 2px solid grey;
        background: #32CC99;
        width: 20px;
        subcontrol-position: left;
        subcontrol-origin: margin;
    }
    


  • This is a sub-control: ::handle.
    This is a pseudo-state: :horizontal.

    According to the documentation

    Pseudo-states appear at the end of the selector



  • This is a sub-control: ::handle.
    This is a pseudo-state: :horizontal.

    According to the documentation

    Pseudo-states appear at the end of the selector


Log in to reply