[CSS] Target empty elements using the :empty pseudo-class
2024-08-27 14:10:49
You can target an element that has no child elements by using the :empty
pseudo-class. With browser support down to IE9, it's solid, easy way to select empty elements without any additional markup.
Be aware that whitespace is considered a "child", so :empty
will not work if the element has no children, but has space between the opening and closing tags.
<!DOCTYPE html>
<html> <head>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head> <body>
<div class="Alert">
<p>Success! Your profile has been updated.</p>
</div> <!-- This empty alert box won't be show-->
<div class="Alert"></div>
</body> </html>
.Alert:not(:empty) {
border: 3px solid darkgreen;
margin: 1em;
padding: 1em;
background-color: seagreen;
color: white;
border-radius: 4px;
} .Alert:empty{
display:none;
}
最新文章
- 最小生成树的Kruskal算法实现
- 最小化安装centos7下配置网络
- BZOJ3325 : [Scoi2013]密码
- Summary: Merge Sort of Array &;&; 求逆序对
- MyBatis对应的xml的数据类型
- dsPIC33EP 高速PWM模块初始化设置及应用
- 层叠水平(stacking level)
- Android ADB使用
- 【Servlet】Servlet应用的get、post访问及和JSP的配合使用
- ListView复用和优化详解
- Perl数组: shift, unshift, push, pop
- Global.asax 文件说明
- tomcat的webappclassloader中一个奇怪的异常信息
- Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE
- solr的认识、linux下安装、java下使用(含下载资源)
- MyEclipse破解步骤
- 《http权威指南》读书笔记16
- JDK动态代理简单使用(2)
- linux源
- Windows 7 quick launch
热门文章
- Linux下MySQL允许远程连接以及授权命令
- Vue项目自动转换 px 为 rem,高保真还原设计图
- django框架初探
- libssh2进行远程运行LINUX命令
- tcpdump重要笔记
- java移位操作符注意的问题
- sql查看依赖关系
- 轻松学习Linux之Shell预定义变量
- 仙人掌的同构(hash)
- <;link rel=";shortcut icon"; href=";Xubuntu.ico"; type=";image/x-icon"; />; 			<;LINK href=";Xubuntu.ico"; rel=";shortcut icon";>; 		<;link href=";Xubuntu.ico"; rel=";B