CSS :defined
의사 클래스는 정의된 요소를 선택합니다. 정의된 요소란 브라우저에 내장된 표준 요소와, 성공적으로 정의(CustomElementRegistry.define()
메서드 등)한 사용자 지정 요소를 의미합니다.
/* Selects any defined element */
:defined {
font-style: italic;
}
/* Selects any instance of a specific custom element */
simple-custom:defined {
display: block;
}
구문
:defined
예제
정의되기 전까지 요소 숨기기
다음 코드는 저희의 defined-pseudo-class 데모에서 발췌한 것입니다. (동작 모습 보기)
이 데모에서는 아주 간단한 사용자 지정 요소를 정의합니다.
customElements.define('simple-custom',
class extends HTMLElement {
constructor() {
super();
let divElem = document.createElement('div');
divElem.textContent = this.getAttribute('text');
let shadowRoot = this.attachShadow({mode: 'open'})
.appendChild(divElem);
}
})
그 후, 위의 요소를 표준 <p>
와 함께 문서에 넣습니다.
<simple-custom text="Custom element example text"></simple-custom>
<p>Standard paragraph example text</p>
CSS에는 다음의 스타일을 작성합니다.
// Give the two elements distinctive backgrounds
p {
background: yellow;
}
simple-custom {
background: cyan;
}
// Both the custom and the built-in element are given italic text
:defined {
font-style: italic;
}
그리고 아래의 두 규칙을 통해, 정의되지 않은 사용자 지정 요소는 숨기고, 정의가 성공적으로 된 경우에는 블록 레벨 요소로 표시합니다.
simple-custom:not(:defined) {
display: none;
}
simple-custom:defined {
display: block;
}
위의 데모는 페이지에 불러올 때 꽤 시간이 걸릴 수 있는 복잡한 사용자 지정 요소 스타일링에 유용하게 쓸 수 있습니다. 로딩이 아직 진행 중일 때, 스타일을 입히지 않은는 못생긴 요소가 페이지에 노출되는 것을 막을 수 있으니까요.
명세
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of ':defined' in that specification. |
Living Standard |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.