2024-06-21

Writerside/topics/Selectors.md

@@ -10,7 +10,7 @@ p {
 }
 ```
 
-## 범용 선택자
+## 전체 선택자
 
 모든 항목을 선택합니다.
 
@@ -39,6 +39,16 @@ p {
 
 ## 속성 선택자
 
+```CSS
+a[href] {/* 지정된 속성을 갖는 모든 요소를 선택 */}
+a[attribute="value"] {/* 지정된 값과 속성의 값이 일치하는 모든 요소 */}
+a[attribute~="value"] {/* 지정된 값이 공백으로 분리된 목록에 포함 */}
+a[attribute|="value"] {/* 지정된 값과 일치하거나 하이픈으로 이어지는 요소 */}
+a[attribute^="value"] {/* 지정된 값으로 시작하는 요소 */}
+a[attribute$="value"] {/* 지정된 값으로 끝나는 요소 */}
+a[attribute*="value"] {/* 지정된 값이 문자열에 포함 */}
+```
+
 ### 속성 이름 선택자
 
 해당 속성이 있는 항목을 선택합니다.
@@ -114,16 +124,18 @@ div[class*="box-"] {
 * :focus
 
 * :required
-* :valid
-* :invalid
+* :valid, :invalid
 * :checked
-* :disabled
-* :enabled
+* :disabled, :enabled
 
 * :is()
 * :has()
 * :not()
 
+* :root
+
+* :playing, :paused
+
 ## 의사 요소 선택자
 
 의사 요소는 유사한 방식으로 동작하지만, 기존 요소에 클래스를 적용하는 것이 아니라 완전히 새로운 HTML 요소를 마크업에 추가한 것처럼 작동합니다.
@@ -134,11 +146,23 @@ div[class*="box-"] {
 * ::first-letter
 * ::selection
 
+* ::grammar-error, ::spelling-error
+
 ## 결합자
 
 다른 결합자를 서로 연결하여 새로운 일치 조건을 만듭니다.
 
-### 후손 결합자
+
+### 그룹 
+
+콤마로 구분된 선택자 각각을 모두 선택합니다.
+
+```CSS
+article, p {
+}
+```
+
+### 자손 결합자
 
 첫 번째 선택자와 일치하는 요소의 자손 중에서 하위 선택자와 일치하는 요소를 선택합니다.