[selector] CSS - :popover-open 가상선택자 - 팝오버 상태인 요소 선택 (= popover-open선택자 = 팝오버오픈선택자)

1. :popover-open 예제 - 팝오버 상태인 요소 선택
2. :popover-open 정의
3. :popover-open 구문

:popover-open 예제 - 팝오버 상태인 요소 선택

 

<style>

:popover-open {

  padding: 20px 40px;

  position: absolute;

  inset: unset;

  top: 20%;

  left: 20%;

  margin: 0;

  color: black;

  background-color: silver;

  font-size: 25px;

}

</style>

<button popovertarget="hz">클릭</button>

<div popover id="hz">홈짱닷컴 Homzzang.com</div>

결과보기

:popover-open 정의

 

팝오버 상태의 모든 요소 선택하는 선택자.

 

---

 

1.

• 기본적으로 브라우저는 뷰포트 중앙에 팝오버를 표시함.
• border-color 속성 경우, color 요소의 속성값을 상속함.

 

 

2. 브라우저 내장 기본 팝오버 스타일은 아래와 같은데, :popover-open 선택자 이용해 밸도로 재정의 가능.

[popover] {

  position: fixed;

  inset: 0;

  width: fit-content;

  height: fit-content;

  margin: auto;

  border: solid;

  padding: 0.25em;

  overflow: auto;

  color: CanvasText;

  background-color: Canvas;

}

 

3.

• CSS4
• IE 제외한 주요 최신 브라우저 모두 지원.

 

:popover-open 구문

 

:popover-open { CSS 선택자; }