Copy CSS Selector

Quickly copy CSS selectors by hovering over HTML elements with class or id attributes.

Features

• 🎯 Quick copying - simply hover over class or id in HTML
• 📋 Automatic detection - extension automatically determines selector type (. for class, # for id)
• 🔧 Enhanced BEM support - automatic creation of all possible BEM variations for complex class structures
• 🌐 Multilingual - supports Russian, English and Chinese languages
• ⚡ Works with HTML and PHP files

How to use

1. Open HTML or PHP file
2. Hover cursor over any class or id attribute
3. A tooltip will appear with the selector
4. Click on the selector to copy it to clipboard

Example

<div class="header__title">Title</div>
<div id="main-content">Content</div>

When hovering over header__title you will see:

• &__title (BEM variation)
• .header__title (full selector)

For complex BEM structures like block__element_modifier__subelement, you will see all possible variations:

• &__subelement (last BEM section)
• &_modifier__subelement (modifier with subelement)
• &__element_modifier__subelement (from element level)
• .block__element_modifier__subelement (full selector)

When hovering over main-content you will see:

• #main-content

Supported languages

• 🇺🇸 English
• 🇷🇺 Русский
• 🇨🇳 中文 (简体)

Installation

1. Download .vsix file
2. In VS Code: Ctrl+Shift+P → Extensions: Install from VSIX
3. Select downloaded file

Requirements

• VS Code version 1.76.0 or higher

Supported files

• HTML (.html)
• PHP (.php)

Enjoy quick CSS selector copying! 🚀