It can be difficult at times to determine exactly which element you’re applying classes to in WYSIWYGs. In some cases, you may want to select a particular element, but clicking on it only selects the element’s contents. Here’s how to specify which element you want selected. We’ll use a list for our example.
The goal: select the entire list
To select the entire list, we’ll need to select the topmost list element (in this case, the topmost <ul>).
...
Step 1: select anything in the list
Here we’ve clicked on subitem b.
...
After doing so, the WYSIWYG informs us the path of the selected element in the footer of the WYSIWYG frame, which is ul > li > ul > li > span. What we ultimately want selected is the topmost <ul> element, not the heavily nested <span> that is currently selected.
Step 2: select the desired element from the selected element path
To select the topmost <ul>, we’ll click on the first ul listed in the currently selected element path.
...