하위 요소가 없는 태그를 설계하려면 empty 선택기를 사용하십시오
5562 단어 CSS
:empty ↑ 링크에서 위조 선택기를 사용하는 것이 매우 편리하다는 것을 알고 있으니, 투고를 허락해 주십시오.※ 참고 사이트의 투고만 읽습니다.잘 부탁드립니다.
:empty 동작 확인
See the PeneqLoPZ by 오무라 건오@okumurakengo
on CodePen .
요소가 비어 있을 때만 스타일을 적용할 때 유용합니다.p>
오류 메시지만❌아이콘 표시
불순한 예
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" />
<style>
.error::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\0274c";
}
</style>
<div class="error"></div>
<div class="error">Missing Email</div>
이 css의 지정 방법이라면
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" />
<style>
.error::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\0274c";
}
</style>
<div class="error"></div>
<div class="error">Missing Email</div>
잘못된 정보가 있든 없든❌아이콘이 표시됩니다.p>
그래서 CSS에 :not(:empty) 를 붙이면...
<style>
.error:not(:empty)::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\0274c";
}
</style>
<div class="error"></div>
<div class="error">Missing Email</div>
이렇게 기대한 대로 스타일을 적용할 수 있다p>
:not(:empty)로 설정하지 않아도 사용display: none;으로 숨길 수 있음p><style>
.alert {
background: pink;
padding: 10px;
}
.alert:empty {
display: none;
}
</style>
<div class="alert"></div>
<div class="alert">Alert Message</div>
:empty를 몰라서 많이 배웠어요
읽어주셔서 감사합니다.m(_ _)m
Reference
이 문제에 관하여(하위 요소가 없는 태그를 설계하려면 empty 선택기를 사용하십시오), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/okumurakengo/items/bdeb1e2f4ad1b69c90fe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
