[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 ...
随机推荐
- CentOS下编译安装Apache
与Apache 2.2.x相比,Apache 2.4.x提供了很多性能方面的提升,包括支持更大流量.更好地支持云计算.利用更少的内存处理更多的并发等.除此之外,还包括性能提升.内存利用.异步 I/O的 ...
- 41.内存函数实现(memcpy,memset,memmove,memicmp,memchr.memccpy)
memcpy #include <stdio.h> #include <stdlib.h> #include <memory.h> void * mymemcpy( ...
- Ubuntu 12.04使用演示
今年年初,发布了Ubuntu 12.04(代号Precise Pangolin),但正式版预计将于2012年的4月底发布,作者对最新版本的ubuntu做了试用,先将操作视频与大家分享.更多内容请关注本 ...
- 搜寻Linux软件实用指南
搜寻Linux软件实用指南 对于初学者来说,仅仅安装好Linux系统还是不够的,还需要安装大量的应用软件.许多下载网站都提供了诸如装机必备软件的下载,分门别类提供经典的工具软件下载.本文主要针对初学 ...
- Kinect 开发 —— 保持视频影像
相比直接将影像显示出来,如果能将录制到的影像保存到硬盘上就好了.但是,影像录制,是需要一定的技巧,在网上可以看到很多例子演示如何将Kinect获取到的影像以图片的形式保存到本地,前面的博文也介绍了这一 ...
- command---调用指定的指令并执行
command命令调用指定的指令并执行,命令执行时不查询shell函数.command命令只能够执行shell内部的命令. 语法 command(参数) 参数 指令:需要调用的指令及参数. 实例 使用 ...
- python2 python3 m2crypto 安装（rsa 私钥文件加密）
转自作者:大道至简_Andy 原文链接:https://www.jianshu.com/p/b308357ef649 第一种方式:使用apt-get(以Python2版本进行测试的) sudo apt ...
- PHP截取字符串长度
<?php function str_cut($string, $start=0,$length, $dot = '..') { $strlen = strlen($string); ...
- 用node.js从零开始去写一个简单的爬虫
如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...
- CentOS 7 网络配置、远程访问
网络配置(配置固定IP访问) 相关命令 ip add 查看网卡状态 ifup eth0 打开端口eth0 ifdown eth0 关闭端口eth0 dhclient 自动获取IP mii-tool e ...