title: Add a new CSS rule in Chrome Developer Tools, not via inspecting an element?
body: <p>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 <a href="https://developers.google.com/chrome-developer-tools/docs/elements-styles#styles_edit" rel="noreferrer">https://developers.google.com/chrome-developer-tools/docs/elements-styles#styles_edit</a></p>
  
  <p>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.  </p>
  
  <pre><code>.y-axis .tick:nth-child(2):nth-last-child(1) text {
    font-weight: bold;
  }
  </code></pre>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/cp2zO.png" alt="enter image description here"></p>
  
  <p>Then when I press Enter or tab out, or try to edit the rule, the text just vanishes. Very frustrating. </p>
  
  <p>How can I add new CSS rules in the developer tools that aren't amenable to being set up via inspecting an element? </p>
  
  <p>Apologies if this is the wrong forum for this question. </p>