[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 ...
随机推荐
- 57.NodeJS入门--环境搭建 IntelliJ IDEA
转自:https://blog.csdn.net/wang19891106/article/details/51127133 NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习N ...
- 浏览器加载跟渲染html的顺序-css渲染效率的探究
1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...
- POJ 3172 （认真读题的题）
题目: 思路: 题目很有意思 首先 题里说:N<=1000 题里又说 诶呦 woc? 这不自相矛盾嘛 最坏情况也就是个 斐波那契数列 几十个数 暴搜+剪枝不就好了嘛 剪枝:从大往小搜,如果前缀和 ...
- c# array arraylist 泛型list
1 array 数组 是存储相同类型元素的固定大小的数据的顺序集合.在内存中是连续存储的,所以索引速度非常快,而且赋值和修改元素也非常简单. //定义字符串数组 大小为3 string[] str1 ...
- 002 python介绍/解释器安装/变量/常量/内存管理
编程语言介绍 机器语言 :直接用计算机二进制指令编写程序,直接控制硬件 汇编语言:用英文标签取代二进制指令编写程序,本质也是直接控制硬件 高级语言:用人能理解的表达方式来编写程序,无需考虑硬件的操作细 ...
- 商业模式(二):P2P网贷平台，利差和服务费为主的金融玩法
2014~2015,先后在2家P2P平台工作过,还了解过其它若干武汉P2P平台. 结合自己的工作经历和理财经历,说几句~ 1.P2P网贷这种金融类的创业项目和经营风险,远高于制造业和服务业~ ...
- 任务调度(四)——ScheduledExecutorService替代Timer，实现多线程任务调度
上篇博文<任务调度(三)--Timer的替代品ScheduledExecutorService简介>已经对ScheduledExecutorService做了简介.事实上使用Schedul ...
- RingtoneManager-获得系统当前的铃声
我们直接看代码 bt1 = (Button) findViewById(R.id.bt1); bt2 = (Button) findViewById(R.id.bt2); bt3 = (Button) ...
- 最值（min、max）与极值的理解
max(a,b)=−min(−a,−b) 如果 a≥b ⇒ max(a,b)=a,−a≤−b,⇒ 同理 min(a,b)=−max(−a,−b) 1. 最值 最小:不能更少,如果是整数关系的话,也即从 ...
- C# 中编写函数式代码
http://www.dotnetcurry.com/csharp/1384/functional-programming-fsharp-for-csharp-developers 写给 C# 开发人 ...