In VSCode, we can quickly select an HTML element by using the Emmet: Balance (Outward) or Emmet: Balance (Inward) commands.
These commands allows us to select the entire HTML element, including its opening and closing tags.
Following are steps to select an HTML Element using shortcut key bindings of VSCode:
We place the cursor inside the element:
Step 01: We move our cursor inside the element we want to select. For example, we place it inside element of <div class="x_title"> or <div class="x_content">.
Step 02: we use the keyboard shortcut:
We press Ctrl + N (Balance Outward). // that is what I set for the shortcut to work
This will select the entire element, including its opening and closing tags.
If we want to expand the selection further:
We press the same shortcut again (Ctrl + N) to expand the selection to the parent element.
Alternative Method:
We can also use the Command Palette:
We press Ctrl + Shift + P to open the Command Palette.
We type Emmet: Balance and select either Balance Outward or Balance Inward.
So, this way we can quickly and efficiently select HTML elements in VSCode!