How do you apply style rule in Safari Web Inspector?

Question

Chrome Developer Tools allows you to apply a style rule in the Styles pane. I haven\'t found a way to do this in Safari (Style Rules pane). Any one know if it is possible?

Answer 1

YES this is absolutely possible - and here is how:

---

Safari 6.x.x

(Safari 6.0.1 Solution Confirmed on Mac OsX)

for the newest version of Safari 6.0+ Apple has taken the luxury of removing those gui elements. the feature is still available however just a little more tucked away. to add your styles in safari 6 you need to follow said steps:

the STEPS:

1. first choose the {} brackets icon in the right sidebar
2. From the DOM model in the center white area of the web inspector- Click to select the HTML element you wish to view styles of. ( they will display in the right style sidebar )

3. On the right style sidebar: double click the closing brace on the existing style for the selector you wish to edit.

    OR
   

   Double click the open area beneath the "Style Attribute" drop down in that same sidebar to add your own styles to that particular element

---

Safari 5.x.x and previous (5.x.x Confirmed Win 7 & Mac OS X)

assuming you have enabled the inspector in the settings advanced menu you can begin right clicking and inspecting elements...

from that point select an element in the DOM on the left from the html markup. now on the right sidebar make sure the "Style" menu is expanded.

once here you have two options:

there should be a blank "element.style" selector available for every DOM element you can select from the left. these are intended for your customization. you can double click here to be given the option to add styles to that selector.

you can also click on the gear at the top right corner of the styles menu in that right side bar and choose the last option "New Style Rule" this will allow you to define your own selector independent of the DOM element you have chosen on the left

you can find the full apple documentation here