☰

Element Selector Tool

Press Ctrl+E to get friendly CSS selectors for any element

설치 방법

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

설치 방법

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

작성자
jamubc
일일 설치 수
0
총 설치 수
3
평점
0 0 0
버전
6.2
생성일
2025-07-14
갱신일
2025-11-03
크기
39.2KB
라이선스
해당 없음
적용 사이트
모든 사이트

Element-Selector-tree-tool (Source) (View on Greasyfork)

Tampermonkey Violentmonkey Web Script

A powerful userscript that provides developer-friendly CSS selectors for any DOM element with visual highlighting and a hierarchical tree view.​

Why it’s useful: Click any element to copy a precise, unique selector so AI or automation can generate a working userscript faster with fewer mistakes.​

[![Chrome](https://img.shields.io/badge/Chrome-✓-4285F4?logo=googlechrome&logoColor=white)](https://www.google.com/chrome/) [![Firefox](https://img.shields.io/badge/Firefox-✓-FF7139?logo=firefox&logoColor=white)](https://www.mozilla.org/firefox/) [![Safari](https://img.shields.io/badge/Safari-✓-006CFF?logo=safari&logoColor=white)](https://www.apple.com/safari/)
Highlighting an element and displaying its CSS selector Hierarchical tree view of DOM elements

Features

  • One-Click Copy and quick view: Click any highlighted element to copy its selector to clipboard
  • Interactive Tree View: Shows element hierarchy with syntax highlighting
  • Smart Selector Generation: Prioritizes reliable selectors (ID → data attributes → unique classes → semantic attributes)
  • Menu Options: Change hotkeys and toggle enable/disable directly from the menu

Installation

  1. Install a userscript manager like Tampermonkey or Violentmonkey or Userscript
  2. Click here to install the script
  3. The script will automatically run on all websites
  4. Setup your own hotkey!: image

Usage

  • hotkey defaults to Ctrl+E, you can change this in the menu *
  • Activate: Press Ctrl+E on any webpage
  • Inspect: Hover over elements to see their selectors and hierarchy
  • Copy: Click on any highlighted element to copy its CSS selector
  • Deactivate: Press Ctrl+E again to exit selector mode

Selector Priority

The tool generates selectors in this priority order:

  1. ID: #unique-id (most reliable)
  2. Data Attributes: [data-testid], [data-cy], [data-test]
  3. Stable Class Combo: button.primary.large (avoids hashed/dynamic classes)
  4. ARIA Attributes: [role="button"], [aria-label="Close"]
  5. Semantic Elements: input[name="email"], button[type="submit"]
  6. Contextual :has() (when applicable): e.g. label[for="id"]:has(+ input)
  7. Hierarchical Path: nearest‑ID path using :nth-of-type when needed

Contributing

Feel free to submit issues or pull requests to improve the tool's selector generation or user experience.

License

This project is licensed under the Apache License, Version 2.0 with Commons Clause License Condition v1.0 - see the LICENSE file for details.