1

Trying to add a New Rule in Firefox Devtools

In the above gif you can see that I am having an issue adding a New Rule .entry-content a to style using Firefox DevTools. For the life of me I haven't been able to get this flow to work:

  1. Right-click > New Rule
  2. Type .entry-content a
  3. Hit Tab
  4. Start adding CSS

Is there something I'm missing? I've been using Firefox as my development browser for just a few months when I moved from Chrome (won't discuss), so that's the environment I'm used to.

Improve this question
1
  • 1
    Great question - in the future for devtools questions please add the developer tools tag - we're monitoring it :) Commented Nov 3, 2014 at 19:02

1 Answer 1

Reset to default
1

When you change the selector to ".entry-content a", that selector no longer applies to the currently selected element (it instead applies to any children of the element). The inspector only shows rules that apply to that element, so the new rule is dropped from the display.

This isn't good behavior however, and here's the Firefox bug for changing the behavior: https://bugzilla.mozilla.org/show_bug.cgi?id=1084670

In the meantime, though it's not ideal, you could add the rule to the stylesheet in the Style Editor tool.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

That bug seems to be mislabeled - Isn't that behavior the way all inspectors work, if you add a selector, it adds it, doesn't change anything else. That bug is about the :pseudo selector of the selected #element completely disappearing when you add a new #element:before for the selected element.
It's the same bug. In both the case of changing the selector to "#element a" and "#element:before", you're changing it to a selector that doesn't match the current element (the pseudo-element selector matches the pseudo-element, not the element). And in both cases the new rule disappears.
I see, I didn't know that was the same thing under-the-hood. Come to think of it I don't know of any way they allow selecting or accessing :pseudo elements but there probably is a mozilla-specific way.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.