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的更多相关文章

  1. [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 ...

  2. 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 ...

  3. [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 : ...

  4. [CSS3] CSS :target Selector

    The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS. ...

  5. css :target

    花了半小时在找如果完成:target的问题 需求:点击<a href="#Main">Main</a>时,会触发:target 效果 结果在网络上没有找到, ...

  6. [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 ...

  7. xsd的解释说明

    schema教程 XML Schema是以XML语言为基础的,它用于可替代DTD.一份XML schema文件描写叙述了XML文档的结构XML Schema语言也被称为XML Schema Defin ...

  8. XML-->DTD&Schema Notes

     The need for XML “schemas” •Unlike any other data format, XML is totally flexible, elements can be ...

  9. [CSS] The :empty Pseudo Selector Gotchas

    The :empty pseudo selector selects empty elements. We can use this to display useful messages instea ...

随机推荐

  1. reactor官方文档译文(2)Reactor-core模块

    You should never do your asynchronous work alone. — Jon Brisbin 完成Reactor 1后写到 You should never do y ...

  2. ble_app_hrs心率程序 nrf51822

    所用程序为: H:\keil\ARM\Device\Nordic\nrf51822\Board\pca10001\s110\ble_app_hrs 上面的路径是安装sdk之后生成在keil软件所在目录 ...

  3. 【Django】AJAX

    目录 JSON 序列化 stringify 反序列化 parse JSON与XML对比 AJAX简介 AJAX常见应用场景 jQuery实现AJAX JS实现AJAX AJAX请求设置csrf_tok ...

  4. JavaScript的子集和超集

    1.JavaScript子集 JavaScript子集的定义大部分都是出于安全考虑,仅仅有使用这门语言的一个安全的子集编写脚本,才干让代码运行得更安全.更稳定.比方怎样更安全地运行一段由不可信第三方提 ...

  5. 类似C语言格式化输出

    java se5引入的format方法可以用于PrintStream或PrintWriter对象,format方法模仿自C的printf(), 如果你比较怀旧的话,也可以用printf(). pack ...

  6. ONVIF客户端搜索设备获取rtsp地址开发笔记(精华篇)

    原文  http://blog.csdn.net/gubenpeiyuan/article/details/25618177   概要: 目前ONVIF协议家族设备已占据数字监控行业半壁江山以上,亲, ...

  7. CMake设置生成vs工程的动态库输出路径

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在网上搜了很多的资料,发现CMake不能设置一个动态库工程的输出目录和中间目录,难道除了VC之外其它编译器如gcc中没 ...

  8. Android之Socket的基于UDP传输

    接收方创建步骤: 1.  创建一个DatagramSocket对象,并指定监听的端口号 DatagramSocket socket = new  DatagramSocket (4567); 2. 创 ...

  9. slice深拷贝数组

    var a = [1, 2, 3, 4] var b = a.slice(0) b[0] = 2 // a = [1, 2, 3, 4] // b = [2, 2, 3, 4]

  10. itchat转发指定的微信群里某个用户的发言到指定的群

    复读机功能, 如果有比较多的用户,超出500人,那就得分开至少两个群,如何把一些消息自动复制到另一个群呢. 自动转发指定用户的发言,转发到别的群 # !/usr/bin/env python # -* ...