11

I want to add a new style rule directly in the Chrome developer tools, but I'm struggling to do so, from following the guide at https://developers.google.com/chrome-developer-tools/docs/elements-styles#styles_edit

This is the CSS rule I want to add - I can't set up the selector by selecting an element, I need to type it it directly. I want to do this to make sure that the CSS syntax itself is correct. 

.y-axis .tick:nth-child(2):nth-last-child(1) text { font-weight: bold; }

I have clicked on the "plus" sign to add the rule, but when I do, I'm finding that the developer tools just won't let me add it by typing or pasting it in - it either goes gray, or it pastes in like this, with the brackets wrong:

enter image description here

Then when I press Enter or tab out, or try to edit the rule, the text just vanishes. Very frustrating.

How can I add new CSS rules in the developer tools that aren't amenable to being set up via inspecting an element?

Apologies if this is the wrong forum for this question.

Improve this question
3
  • 3
    When you go add +, type/paste in the rule selector first and not the entire rule. After the selector has been added, only then can you put in font-weight, etc. Commented Feb 5, 2014 at 20:42
  • Pretty sure that selector wont work anyway since it has multiple pseudo-classes followed by something (text) that is not an HTML element. Commented Feb 5, 2014 at 21:52
  • 1
    It's an SVG element - it works just fine here: jsfiddle.net/uh29j/1 Commented Feb 6, 2014 at 11:40

2 Answers 2

Reset to default
6

For it not to go gray, you need to select an element to which the rules DOES apply.

You are not showing your code, but that rule will only apply to a second child of .tick which is ALSO the last child. If the element you clicked to create that rule does NOT meet those selectors, it will go gray, and BELOW the other rules for the element itself.

Current versions of Chrome will won't move it or hide it until you select another element, so this is probably an old issue, but for others experiencing similar issues: "The rule must apply to the selected element". But since you can't touch the pseudo element until you add content:"" to it, you'll have to create the rule, add content property to it, then touch the pseudo element, and then it will not be dimmed anymore.

Again, current Chrome allows you edit it even when dimmed.

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

Comments

6

First, select some element and add a new CSS rule as described in the Chrome documentation:

Click the New Style Rule New Style Rule icon located in the upper-right corner of the styles editor. A new rule with an automatically suggested selector appears.

Then, click the inspector-stylesheet:1 link in the top-right corner of the newly added rule box and edit the rule in the Sources tab of the Developer Tools.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.