Cascade: Selecting elements in WYSIWYGs

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.

clicking the list selects the list contents

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.

This results in the topmost list <ul> element being selected. Hooray!