[CSS] Target empty elements using the :empty pseudo-class
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;
}
[CSS] Target empty elements using the :empty pseudo-class的更多相关文章
- [CSS] Target Positional Elements Using *-Of-Type CSS pseudo-classes
Learn how to target elements based on their position inside of a parent element in relation to its s ...
- Hbase服务报错：splitting is non empty': Directory is not empty
Hbase版本:1.2.0-cdh5.14.0 报错内容: org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.fs.PathIsNotEm ...
- [CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements (Blockquotes)
Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using ::before : ...
- [CSS3] CSS :target Selector
The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS. ...
- css :target
花了半小时在找如果完成:target的问题 需求:点击<a href="#Main">Main</a>时,会触发:target 效果 结果在网络上没有找到, ...
- [CSS] Dynamically Size Elements with Pure CSS
Learn how to size elements based on the dimensions of the viewport, even when the browser is resized ...
- xsd的解释说明
schema教程 XML Schema是以XML语言为基础的,它用于可替代DTD.一份XML schema文件描写叙述了XML文档的结构XML Schema语言也被称为XML Schema Defin ...
- XML-->DTD&Schema Notes
The need for XML “schemas” •Unlike any other data format, XML is totally flexible, elements can be ...
- [CSS] The :empty Pseudo Selector Gotchas
The :empty pseudo selector selects empty elements. We can use this to display useful messages instea ...
随机推荐
- H265（HEVC） nal 单元头介绍及rtp发送中的fu分组发送详解
首先来介绍下h265(HEVC)nal单元头,与h264的nal层相比,h265的nal unit header有两个字节构成,如下图所示: 从图中可以看出hHEVC的nal包结构与h264有明显的不 ...
- 10.axis实现webservices分布式通信
转自:https://www.aliyun.com/jiaocheng/310112.html 分布式通信原理 基本原理:stub和skeleton作为客户端和服务端传输的中介,stub和skelet ...
- 在kafka/config/目录下面有3个配置文件参数说明（producer.properties。consumer.properties。server.properties）
(1).producer.properties:生产端的配置文件 #指定kafka节点列表,用于获取metadata,不必全部指定 #需要kafka的服务器地址,来获取每一个topic的分片数等元数据 ...
- Redhat Linux下如何使用KVM虚拟机（视频）
KVM(kernel-basedVirtualMachine)是一个开源的系统虚拟化模块,自Linux2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调度器进行管理,所以相 ...
- 【DRF权限】
目录 权限的详细用法 我们都听过权限,那么权限到底是做什么的呢. 我们都有博客,或者去一些论坛,一定知道管理员这个角色, 比如我们申请博客的时候,一定要向管理员申请,也就是说管理员会有一些特殊的权利, ...
- CMDB学习之一
CMDB - 配置管理数据库 资产管理 自动化相关的平台(基础 CMDB): 1. 发布系统 2. 监控 3. 配管系统.装机 4. 堡垒机 CMDB的目的: 1. 替代EXCEL资产管理 —— 资产 ...
- Intellij IDEA中修改项目名称
如下图红色标识所示: 修改方法见下图:
- 关于使用strtok的一个小问题
今天在弄一下啊小小程序的时候.报错,出现了问题.先看代码 int main(int argc, char* argv[]) { char *filename = "interface_ips ...
- LINUX下为apache 和 PHP 添加模块
LINUX下为apache 和 PHP 添加模块https://www.path8.net/tn/archives/4717/opt/lampp/bin/httpd -V/opt/lampp/bin/ ...
- 使用Notepad++的XML Tools插件格式化XML文件
转自“”:https://blog.csdn.net/qq_36279445/article/details/79803310 1. 安装XML Tools插件 (1) 通过网址http://sour ...