If no objects are selected, a default 'class' selector will appear. If objects are selected on the desktop when the dialog is opened, an 'id' selector composed of their 'id's will populate the entry widget. When the + at the bottom of the CSS Selectors Pane is clicked a dialog will pop-up allowing you to type in a new selector. Selecting an object in this list also selects the selector it belongs to. Clicking on the triangle in front of the selector will expand the selector to show a list of all objects that match the selector. Clicking on the - allows one to deleted a highlighted selector. Clicking on the + at the bottom of the pane allows one to add a new selector via a pop-up dialog.

This pane allows one to add and remove selectors from an SVG document.

Selecting an object on the desktop will select the first selector in the CSS Selectors Pane that matches that object. Selecting a selector in the CSS Selectors Pane will select on the desktop all objects that match that selector. The bottom pane contains a list of CSS properties with their values as defined by the selector chosen in the CSS Selectors Pane, and if an object is selected under the chosen selector, as defined by the style attribute of that object. The top pane contains a list of CSS selectors that are defined in the SVG's first element. The Style Dialog can be opened by clicking on the 'Style Dialog' entry under the 'Object' menu. One major bug remains: documents are not tracked properly. As of now (February 2017), all the basic functionality is in place. I (Tav) have heavily refactored the code to streamline it as well as to extend its functionality. Kamalpreet Kaur Grewal implementing the Style Editor dialog for her successful GSoC project. 6 A first attempt at a Style editing dialog.2.2.1 The highlighted row is a selector.

Inkscape font editor