Ceci est une ancienne révision du document !
This month, we’ll continue looking at the Selectors and CSS dialog (or just “Selectors dialog” for short). Now would be a good time to review the previous couple of instalments if you need to, before we dive in deeper. As with last month, we’ll be working with this collection of shapes arranged as four groups of objects, one for each row. Starting with a blank Selectors dialog, last month I showed you how to select the first item in each row (Ctrl-Shift-Click each one), and add a new class to them all, so that they appear in the dialog. Let’s do the same thing this time:
Previously, we used this capability to add some override styling for those objects. But what if we don’t do that? What if we just leave the styles alone? In that case, what we’ve created is a convenient way to re-select all those objects any time we need to: clicking on the “.Class1” entry in the right-hand pane is all that is required.
This, essentially, returns the capability of the Selection Sets dialog, which was introduced with version 0.92, but removed with version 1.0.
The Selection Sets dialog allowed you to name (and re-name) your sets, change the label for each object, and add or remove items from sets. The new Selectors dialog is slightly more limited. Double-clicking on the CSS selector won’t let you edit it – so you’re stuck with the class name you initially created. The listed items are now shown as IDs rather than labels (they include the “#” prefix that CSS uses for IDs, making this difference a little clearer). Double-clicking on an ID just selects it, it doesn’t allow you to edit the label or the ID of the object in question.
The Selectors dialog updates in real-time to changes in the SVG content, however, so if you really want to change your class name, you can edit it in the Edit > XML Editor dialog. Just be aware, however, that editing the selector name in the stylesheet won’t automatically apply that change to the class attributes in the individual elements – you will need to manually change all of those to suit, as well. In most cases, therefore, it’s easier to delete the class entry from the Selectors dialog and re-create it.
You can still, however, add and remove things from the “set” – though in reality what you’re actually doing is adding and removing the class from the object. We looked at removing items last time – you just need to click on the delete button to the left of each thing you want to remove. Doing this will also remove any style overrides, most likely returning you to a black fill with no stroke, but if you’re using this dialog just for managing selection sets and haven’t modified any styles, then this won’t be a concern.
Adding new items to the set is also pretty straightforward. You simply have to select them on the canvas, then click the “+” button next to the CSS selector. In this example, I’ve selected the items from the second column and clicked the button, and you can clearly now see that the set contains eight items.
Clicking CSS selector (the “.Class1” entry on the right) will select all eight items on the canvas.
Using this technique, you can create new classes (i.e. selection sets) for any combination of items you want. Let’s go through the steps to create a set that contains all the squares: • De-select everything – by using Edit > Deselect, by pressing the Escape key, or simply by clicking on the canvas background. • Click the “+” button at the bottom of the Selectors dialog. Unfortunately, you’ll be presented with the same default class name (“.Class1”) every time you do this. It doesn’t auto-increment, so you need to make sure you change it by hand to something unique. In this case, I’m going to create a class called “squares” by just typing the name into the prompt, preceded by a dot. You don’t need to supply the leading dot to indicate a class – Inkscape will add that for you – but I recommend always including it, for reasons I’ll go into later in this article. • Select all the squares, by Ctrl-Shift-Clicking each of them. • Click the “+” next to the “.squares” CSS selector line in order to add the “squares” class to each item, thus making them appear in the set.
If done correctly, the dialog should now be showing both the “.squares” class (with four items) and the “.Class1” class (with the eight items we added previously). The sections can be collapsed and expanded using the toggle triangles next to the class name, and selecting either of them will select the corresponding set of items on the page.
At any time you can select more items on the page and add them to the existing class using the plus button next to the relevant CSS class selector in the second pane. Or you can create another class entirely, using the plus button at the bottom of the dialog.
As mentioned, clicking on a class selector in the second pane will not only show you the relevant CSS properties on the left, but it will also select all the objects with that class on the page – a replacement for the Selection Sets dialog. You should use this capability carefully, however. I recommend treating “Selection Set” classes and “Styling” classes as two different things.
What do I mean by that? Last time, I demonstrated how you could use classes to change the style of the selected elements. But if you do that, it’s very easy to end up with elements that have no styling applied at all, if you subsequently remove the class name from them. So if you want to use this dialog to manage classes as though they were selection sets, it’s best not to also apply any styles as part of those classes. I recommend using one class (or set of classes) for selections, with no style changes in the left-hand pane, and different classes for styling changes, even if it means you have two classes that actually select the same objects.
Here’s that method in practice: the “.squares” class is as it was before, it just selects all the squares, but doesn’t change their style. The “.yellow-fill” class contains exactly the same objects, but changes their fill color. Now if I want to also change the stars to have a yellow fill, I can add them to the latter class, without disrupting the “selection set” formed by the “.squares” class.
Up to now, I’ve looked at creating just class-based selectors in this dialog, but you can also use it to create other types of rules in your stylesheet. So far, we’ve added the “squares” and “yellow-fill” classes to all of the squares in the image, but because these are all the same type of SVG primitive, there’s an easier way to select or style them all: the element selector. The squares are all <rect> elements in the SVG, which means they can be targeted with a selector that literally just contains the word “rect”. Just create a new entry using the “+” button at the bottom of the dialog, but enter “rect” into the prompt, with no preceding dot. In this way, I’ve changed the stroke to a thick blue line on all of the squares, while still leaving them with the yellow fill from the previous class-based rule.
Inkscape did not automatically prefix the word “rect” with a dot, as it would have done when creating a class selector. This implies that the program must maintain a whitelist of element names which are allowed to pass through untouched. To avoid accidentally creating an element selector when you meant to create a class selector, therefore, I recommend always including the leading dot when entering a new class name. In this case, for example, typing “.rect” into the prompt does create a class selector as expected, whereas omitting the dot creates an element selector.
One advantage of element selectors is that they are dynamic in nature. Add another rectangle to the page and it will automatically be included in your “rect” selector. But be aware that inclusion in the selector may not be enough for it to behave the way you expect. In the example above, the “rect” selector defines a thick blue stroke, yet drawing a new rectangle doesn’t produce that result.
The reason for this is that the new elements you draw will have their style properties set via their “style” attribute, as usual. As we found out previously, these will override those in the stylesheet, preventing the element rules from working. The solution is to remove the override rules from the “style” attribute – which can be done by selecting the element and then deleting the rules from the “element” section of the left pane in the Selectors dialog. Nevertheless, it’s an additional few steps that may get overlooked, and can become tedious when dealing with many elements. Unless you’ve got a good reason to do otherwise, it’s probably best to stick with class-based selectors for styling – at least you can then select all your new elements and add them to the class with a single click in the dialog.
Element selectors also exhibit some odd behaviour within the dialog. Each matching element has its ID shown below the selector, as you would expect, but they still have delete buttons next to them. Clicking one of those buttons does nothing: it doesn’t delete the element itself (which would be the only practical way to remove them from the selector), so they appear to be completely redundant. Worse than that, clicking the selector itself ,then the “-” button at the bottom of the dialog, does not delete the selector. Removing an accidentally created element selector, or one that is no longer needed, requires a trip to the XML editor.
Element and class-based aren’t the only types of CSS selectors supported by this dialog, however. The other types also come with a few potential inconsistencies and problems, but that’s the subject of next month’s instalment…