[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 ...
随机推荐
- solrj简介
SolrJ基于httpClient: 使用SolrJ操作Solr会比利用httpClient来操作Solr要简单. SolrJ是封装了httpClient方法,来操作solr的API的. SolrJ底 ...
- C#引用c++DLL结构体数组注意事项（数据发送与接收时）
本文转载自:http://blog.csdn.net/lhs198541/article/details/7593045 最近做的项目,需要在C# 中调用C++ 写的DLL,因为C# 默认的编码方式是 ...
- LightOJ 1300 Odd Personality
Odd Personality Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on LightOJ. Ori ...
- Irrlicht 3D Engine 笔记系列 之 教程5- User Interface
作者:i_dovelemon 日期:2014 / 12 / 18 来源:CSDN 主题:GUI 引言 今天.博主学习了第五个教程. 这个教程解说了怎样使用Irrlicht内置的一个基础模块.GUI模块 ...
- CodeForce 424C Magic Formulas
这个题就是求出给的公式的结果. 仅仅要知道异或运算满足交换律跟结合律即可了.之后就是化简公式. #include<map> #include<string> #include& ...
- php资源类型变量
php资源类型变量 一.总结 1. php资源类型变量:用来打开文件.数据库连接.图形画布区域等的一种特殊变量,比如FILE *fp; 二.PHP: Resource 资源类型 Resource 资 ...
- Objective-C基础笔记（4）Category
OC中提供了一种与众不同的方式--Category,可以动态的为已经存在的类添加新的行为(方法),这样可以保证类的原始设计规模较小,功能增加时再逐步扩展. 在使用Category对类进行扩展时,不需要 ...
- Codeforces 919F. A Game With Numbers（博弈论）
Imagine that Alice is playing a card game with her friend Bob. They both have exactly 88 cards and ...
- 多线程中的"断点"续传《notify()和wait()》
眼下在做一个项目.关于软件管理与下载的,预计项目提交日期定在6月9号.项目做了有20天了,可是在一个功能上卡住了.在这个项目中有一个功能----APK的下载须要实现. 相信大家都玩过非常多关于下载AP ...
- 《ASP.NET》数据绑定—DropDownList、ListBox
DropDownList和ListBox实现两级联动功能.他们也能够将从后台数据库中搜选的出来的信息加以绑定.这里要实现的功能是在DropDownList中选择"省",然后让Lis ...