[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 ...
随机推荐
- ajax ---- json 和 xml 区别
2.XML和JSON优缺点 (1).XML的优缺点<1>.XML的优点 A.格式统一,符合标准: B.容易与其他系统进行远程交互,数据共享比较方便.<2>.XML的缺点 A.X ...
- Day4晚笔记
数据结构 并查集:捆绑两个点的信息,判断对错 倍增:LCA, 字符串 hash,模拟, 最小表示法 给定一个环状字符串,切开,使得字符串的字典序最小 图和树 割点,割边,强联通分量 点双联通分量 (把 ...
- select发生改变使用js提交form表单（get传值）
form表单如下: <form id="my_form" method="get" action=""> <input t ...
- flex布局：
他的布局主要有两个“二”,一个二:容器项,子项目项.另一个:有两条轴,主轴,副轴.它的使用时,必须先声明说明是flex布局:display:flex; 针对于容器项的属性6个: 1.flex-dire ...
- JS match方法的返回数据的探究
match方法是JS的字符串方法,详细说明可以看MDN的说明. 如果正则表达式匹配成功的话,match方法会返回一个数组,而数组里的数据有两种形式,对应着匹配方式:全局匹配与非全局匹配. 1. 全局匹 ...
- CF-833B The Bakery（线段树优化Dp）
Some time ago Slastyona the Sweetmaid decided to open her own bakery! She bought required ingredie ...
- Vijos——T 1164曹冲养猪
https://vijos.org/p/1164 描述 自从曹冲搞定了大象以后,曹操就开始捉摸让儿子干些事业,于是派他到中原养猪场养猪,可是曹冲满不高兴,于是在工作中马马虎虎,有一次曹操想知道母猪的数 ...
- 一起talk C栗子吧（第九十八回：C语言实例--使用消息队列进行进程间通信二）
各位看官们,大家好,上一回中咱们说的是使用消息队列进行进程间通信的样例.这一回咱们接着上一回的内容继续说使用消息队列进行进程间通信.闲话休提.言归正转.让我们一起talk C栗子吧! 我们在上一回中介 ...
- Apache中PHP5.3 php5.4如何使用ZEND
Apache中PHP5.3 php5.4如何使用ZEND 有一套zend加密程序,需要安装ZEND,经过多次尝试,结果如下 由于PHP有安全线程(TS)和非安全线程(NTS)区分,PHP官方网站上说, ...
- Android: 分页浏览的利器 android View Pager
最近有一个项目需求,水平滑动实现视图切换(分页显示效果) 最先想到的是ImageSwitcher + ViewFilpper 来实现,这效果做出来我自己都不想用,更不用说客户的感觉了:滑动效果生硬,只 ...