Depending on how your page is coded, the element you select with your mouse (the one that is outlined in blue) may not be exactly the one you wish to modify.
For example, if you have tags embedded within each other, it may be difficult to select the proper tag with the mouse (<div><a><span><strong>text</strong></span>/a><div>).
To remedy this issue, we have developed two functions that allow you to select the precise element you wish to modify by using the DOM (Document Object Model) from top or bottom, using the following features:
- Select parent
- Select child
As a reminder, we indicate the currently selected element’s tag type in the contextual menu that is displayed, as shown in the following image:
The two features that allow you to narrow or expand your selection are listed at the bottom of this contextual menu. If the option “Select child” does not appear in the menu, like in the example above, that means that the selected element does not have a child tag.
In the image above, the second level of the menu shows all the parent tags of the selected tag. Our <a> tag is included inside an <h3> tag. This <h3> tag is also included inside a <div> tag, and so on.
By mousing over one of the items on this menu, the highlighted element will change to reflect the element which will be retained if you select this item. Just click on the desired item to select the corresponding element in the editor. A new menu will then appear so you can choose the modification to be performed.