HTML to CSS Selector

HTML/CSS 작업을 단축키 하나로!

⌨️ 단축키

Mac: Cmd 사용

🔄 Ctrl+Shift+V (선택자만)

📝 예시

1. HTML → CSS

<div class="product-info">
  <p class="product-name"><a href="#">상품</a></p>
</div>

.css 파일에서 Ctrl+Shift+V:

.product-info {
  
}
.product-info .product-name {
  
}
.product-info .product-name a {
  
}

.scss 파일에서 Ctrl+Shift+V:

.product-info {
  .product-name {
    a {
    }
  }
}

2. CSS → 선택자만 (Ctrl+Shift+V)

.container { width: 100%; }
.container { padding: 20px; }
.header { color: red; }

↓

.container {
  
}
.header {
  
}

3. CSS 중복 병합 (Ctrl+Alt+V)

.container { width: 100%; }
.container { padding: 20px; }
.header { color: red; }
.container { margin: 0; }

↓

.container {
  width: 100%;
  padding: 20px;
  margin: 0;
}
.header {
  color: red;
}

✨ 특징

• 잘못 복사된 CSS도 자동 정리 (앞뒤 } { 제거)
• 주석 자동 제거
• 중복 선택자 자동 병합
• 불완전한 CSS 블록도 처리

🎯 지원 파일

.css .scss .sass .less

Made with ❤️ by dunopi