[Solved] Need help trying to find what is wrong with these 2 lines..

edited November 2016 in Style Development Firefox

I am probably overlooking something really simple but I can't figure out what for the life of me. I want to use the following lines in Firefox:

#identity-box:hover ~ .urlbar-input-box {
    border-image: none !important;
}  

so that when I hover #identity-box, .urlbar-input-box's border-image gets removed, but it isn't working at all.

Here's the Developer Tools screenshot of the relevant part:

I actually can't get even the following simplified version to work either:

#identity-box ~ .urlbar-input-box {
    display: none !important;
}  

I believe I have done my homework - here's a screenshot from this question from StackOverflow:

I believe I have this right:

  • .urlbar-input-box should match, well, .urlbar-input-box
  • .urlbar-input-box is a sibling of / shares the same parent as #identity-box
  • .urlbar-input-box appears after #identity-box in the source order

Then why won't it work :(

I would appreciate any help. Thanks!

Comments

  • edited November 2016 Chrome
    I don't know a whole lot about styling FF's chrome, but I can tell you that you have the right idea about the sibling combinator in general. I suspect that html and xul elements are more like step-siblings, which is why the combinator isn't working. That's a not-so-educated-guess though.

    Edit: I suck at using DOMi, but maybe this is close to what you're going for:
    .autocomplete-textbox-container.urlbar-textbox-container:hover .textbox-input-box.urlbar-input-box{border-image:none!important;}
  • edited November 2016 Firefox

    I suspect that html and xul elements are more like step-siblings, which is why the combinator isn't working.

    No. Anyway, they're both XUL elements. The "xul:" prefix in DOMi and in Browser Toolbox indicates anonymous (XBL) content.
    https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/XUL_Reference
    https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Anonymous_Content
    Orangutan said:

    Then why won't it work :(

    Because your selector is trying to follow the DOM tree from document content to anonymous content but anonymous content isn't really in the DOM. It connects to the DOM via parentNode, but it isn't a child of its parent node (i.e. in parentNode.children). Think of it as an elaborate pseudo-element, like ::before but with its own little anonymous DOM.

    So, your sibling selector fails (anonymous content is in red)
    #identity-box ~ .urlbar-input-box {  font-style: italic } /* fails */
    because anonymous content is never a sibling of document content. (Different DOM trees.) You can select anonymous descendants of DOM elements
      #urlbar .urlbar-input-box { background-color: yellow } /* works */
    because parentNode can be followed up to the (anonymous) XBL root and from there to the DOM, but you can't select DOM descendants of anonymous elements
      .urlbar-textbox-container #identity-box { background-color: gold } /* fails */
    because the parentNode of a DOM element is always another DOM element - you can't reach anonymous content from the DOM. (At least not that way.)

    You just have to be a little careful when selecting into an XBL widget.
      #urlbar                           #identity-box { background: silver } /* works */
    #urlbar .urlbar-textbox-container #identity-box { background: gold } /* fails */
    If this is still confusing, open DOMi and experiment with [menu] > View > Show Anonymous Content, or compare what you see in Browser Toolbox with view-source:chrome://browser/content/browser.xul


    Although formally selectors are evaluated left-to-right per the W3C, in practice they're usually evaluated right-to-left to reduce the search space, which is why you can select anonymous descendants of DOM nodes at all.
    https://drafts.csswg.org/selectors-4/#evaluating-selectors
  • I was surprised when you stopped by earlier and didn't give me shit on this one. I didn't see the other element in DOMi, but I barely know what I'm looking at in DOMi anyway. I still think the code I posted should behave similarly to what was intended.
  • edited November 2016 Firefox

    I still think the code I posted should behave similarly to what was intended.

    Dunno. Did the OP ask for code?

    I barely know what I'm looking at in DOMi anyway.

    Screenshot is of the Browser Toolbox, not DOMi, though DOMi would be more enlightening in this case. If you read what I wrote then you should know quite a lot now about what you're looking at. If you only scanned it for points of attack then you're still on the karma wheel.

    I was surprised when you stopped by earlier and didn't give me shit on this one.

    I quoted you en passant because it was easier than restating the misunderstanding. I correct your mistakes and parry your attacks; I don't pay attention to the rest, or to you particularly.

    Usually I see something like this:


    Except that the kitten is cute, it isn't the one inventing malarky about force fields, and it won't claw me if I help it.
  • Screenshot is of the Browser Toolbox, not DOMi, though DOMi would be more enlightening in this case.

    I said that I used DOMi. That is all.

    If you read what I wrote then you should know quite a lot now about what you're looking at. If you only scanned it for points of attack then you're still on the karma wheel.

    I briefly scan most of what you write, not typically looking for "points of attack" (btw when did I attack you here), but because you are long-winded and too pretentious not to go off on tangents which leads to you explaining things purposely overcomplicated.

    inventing malarky about force fields

    Purposely overcomplicated humor? It's hard to tell.



    The cat is cute. I wouldn't count on the fact that it won't claw you though. They sense evil.
  • "Overcomplicated"? I don't think so. Maybe you're a bit slow.
  • Thanks @hideheader for the detailed explanation! It was very helpful.

    Thanks @anagrammar for the code. It is pretty close to what I am trying to do.

  • like oil and water
Sign In or Register to comment.