[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 ...
随机推荐
- Nginx安装以及配置
安装编译工具及库文件 1 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 安装 PCRE 下载 PC ...
- Linux下VsFTP和ProFTP用户管理高级技巧 之一
Linux下VsFTP和ProFTP用户管理高级技巧 FTP服务时互联网上比较古老的一种应用,至今Interner应用面非常广泛,但令管理员头痛不已的是其用户管理,既多且杂,如何解决这一问 ...
- Fragment-管理Fragment2
上一篇,给大家讲了有关Fragment管理的几个函数,即add,replace,remove,这节再讲讲其它函数,然后再给大家看一个系统BUG. 一.hide().show() 1.基本使用 这两个函 ...
- $.each(data, function (index, value) { })的用法；json和list<>的互相转换
在json中常常碰到这样的代码: jquery $.each(data, function (index, value) { }) 遍历处理data,可以是数组.DOM.json等,取决于直接给 ...
- Linux-swap分区
Linux内核为了提高读写效率与速度,会将文件在内存中进行缓存,这部分内存就是Cache Memory(缓存内存).即使你的程序运行结束后, Cache Memory也不会自动释放.这就会导致你在Li ...
- Android Studio 函数使用方法提示 快捷键
看到好多说用F2的,转来转去,中国社区的氛围大概如此,你抄我的,我超你的. 下面的千篇一律: "悬浮窗不出来了,各种不习惯啊.那在Android Studio究竟怎样查看函数的说明呢.选中你 ...
- absolute、relative，toggle()
測试代码例如以下: <div> <div class="global">不应用样式</div> <div class="glob ...
- php实现排列组合
php实现排列组合 一.总结 1.回溯:回溯的函数参数有些生疏了,记录递归的位置(pos或step),还要有东西(vis数组)来记录这个是否已经被访问 2.php全局变量的使用 :外部定义的普通变量, ...
- Elasticsearch5.0.1 + Kibana5.0.1 + IK 5.0.1
Elasticsearch5.0.1 + Kibana5.0.1 + IK 5.0.1安装记录 最近工作需要,开始研究ES,当前ES的最新版本为5.0.1,从之前的2.x的版本号一下升级到5.x,主要 ...
- 使用Iperf调整网络
使用Iperf调整网络 Iperf 是一个 TCP/IP 和 UDP/IP 的性能测量工具,通过调谐各种参数可以测试TCP的最大带宽,并报告带宽.延迟,最大段和最大传输单元大小等统计信息.Ip ...