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. 轻松使用 Redis slowlog

    之前中秋项目搞活动,用户比较活跃 SE.Redis 频繁报 Timeout 异常,狂翻了一波 issues 发现提这个问题还蛮多的,作者非常频繁的提到使用 slowlog 这个命令进行排查,那么问题就 ...

  2. C_深入（内存模型）

    01 数据类型: 为什么有数据类型? 现实生活中的数据太多而且大小形态不一. 数据类型与内存的关系: 数据类型的本质:创建变量的模具,是固定大小的别名. #include "stdio.h& ...

  3. CSS 文本样式

    1. 文本样式 text <!--文本颜色color --> .text {color:red;} 2. 文本对齐方式    text-align <style> .text ...

  4. hash_set和hash_map

    1.hash_set集合容器 hash_set利用链式哈希表,进行数据的插入.删除和搜索.与set容器同样,不同意插入反复键值的元素.SGIC++哈希表是一个链式的结构,由表头和一系列单链组成.表头是 ...

  5. Cookie应用--显示看过的商品

    package cn.itcast; import java.io.IOException; import java.io.PrintWriter; import java.util.LinkedHa ...

  6. Logstash读写性能调整优化

    继续

  7. EPC-9600I-L开发板使用

    1,开发板屏幕,先买的开发板,再买的屏幕,屏幕是7英寸的,与开发板默认烧进的内核不匹配,找板商重新要了匹配的内核,将原内核替换掉,根文件系统和uboot不变,进行重烧. 2,开发板屏幕校准准备 如果校 ...

  8. BZOJ4817: [Sdoi2017]树点涂色(LCT)

    Description Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同.定义一条路 径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. ...

  9. 阅读笔记——Servlet

    什么是Servlet Servlet是用java编写的运行在web服务器中的程序,因此它可以调用服务器端的类,它也可以被调用,它本身就是一个类. Servlet的工作原理 servlet由web服务器 ...

  10. 洛谷 P1679 神奇的四次方数

    P1679 神奇的四次方数 题目描述 在你的帮助下,v神终于帮同学找到了最合适的大学,接下来就要通知同学了.在班级里负责联络网的是dm同学,于是v神便找到了dm同学,可dm同学正在忙于研究一道有趣的数 ...