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. Standalone 集群部署

    Spark中调度其实是分为两个层级的,即集群层级的资源分配和任务调度,以及任务层级的任务管理.其中集群层级调度是可配置的,Spark目前提供了Local,Standalone,YARN,Mesos.任 ...

  2. Vue 学习记录<2>

    一.Vue https://vue-loader.vuejs.org/zh-cn/ https://vuejs-templates.github.io/webpack/structure.html

  3. js24---工厂模式2

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. php课程 12-41 多态是什么

    php课程 12-41 多态是什么 一.总结 一句话总结:一种请求,多种响应(根据参数类型和数量) 1.function useUsb(Usb $usb){}这句话是什么意思? 判断$usb参数是否实 ...

  5. 27.mutex跨进程通信

    创建互斥量mutex HANDLE mutex = CreateMutexA(NULL, TRUE, name); 根据id打开mutex HANDLE mutex = OpenMutexA(MUTE ...

  6. int android.support.v7.widget.RecyclerView$ViewHolder.mItemViewType' on a null.....

    Android.support.v7.widget.RecyclerView$ViewHolder.mItemViewType' on a null..空指针问题,费劲心思才找到报空指针的原因: 代码 ...

  7. golang 方法内部定义子方法及调用

    package main import ( "fmt" "reflect" ) func out(ch chan int) { <-ch fmt.Prin ...

  8. react radio onchange事件点击无效

    记: 项目需求:   页面中radio默认选中        第一次进去页面   点击radio的时候不管怎样点击    都是选中 连onChange事件都没触发 进入页面  点击刷新   点击rad ...

  9. 关于Webpack详述系列文章 （第四篇）

    1. webpack基本概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入.Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.We ...

  10. C#里如何把一个DataTable的数据追加进数据库里的某个表

    方法一: DataTable table = new DataTable(); //TODO: init table... string connStr = "user id=" ...