Confused about how style sheet inheritance works



  • Scenario: I have a QMdiSubWindow with some minor padding and border styling applied to all widgets within it. I want to exempt a QWebView and it's child QWebPages from this styling.

    I can't apply style sheets directly to the QWebPages; I have applied them to the QWebView but strangely the pages still inherit styles from the sub-window instead.

    Applied to QMdiSubWindow:

    QWidget { padding: 1; border: 0; }
    

    How should I change this, or what should I apply to QWebView to solve the problem? I'm not a CSS expert so admittedly this might be something basic I'm overlooking.


  • Lifetime Qt Champion

    Hi,

    Be more precise with your style sheet. Yours basically say that all QWidgets should have the properties you set there.



  • @SGaist Except that is, effectively, what I want. Sure, I can be more granular when it comes to the stylesheet that is applied to QMdiSubWindow, but that won't work for many cases.

    Let's say I have this applied to QMdiSubWindow:

    QLineEdit { border: 0; }
    

    Then I have a QWebPage with a text entry form. For some reason, that text entry form appears with no border, even when I apply this to its parent QWebView:

    QLineEdit { border: 5; }
    

    So granularity is of course a good suggestion but it doesn't really solve my problem.



  • I resolved the immediate issue, by going more granular in the subwindow style sheet, figuring out and listing the widget classes I wanted to target without hitting every single QWidget. QWebView currently doesn't have any styling at all.

    Ultimately, I still don't understand how QWebView is applying its style sheets. If I tested something out like QLineEdit { border: 200; }, the form field would appear with its normal border. If I did * { border: 200; }, it would have no border.



  • @define-qt
    You can be more specific using the name of object as identifier in style sheet sintaxe

    QLineEdit#ObjectName { border:0; }