The :empty pseudo selector selects empty elements. We can use this to display useful messages instead of the empty content or hide the content completely. However, the :empty pseudo selector comes with a couple of potentially confusing behaviors when it comes to which elements it considers empty.

<!DOCTYPE html>

<html lang="">

  <head>

    <meta charset="utf-8" />

    <style type="text/css">

      p {

        background: rgb(255, 211, 233);

        margin-top: 10px;

        margin-bottom: 0px;

        padding: 10px;

      }

      // Be carefual that img is also considered as an empty element

      *:empty {

        display: none;

      }

    </style>

  </head>

  <body>

    <p></p>

    <p>Some content</p>

    <p></p>

    <img

      width="200px"

      height="200px"

      src="https://source.unsplash.com/user/erondu/daily"

    />

  </body>

</html>

[CSS] The :empty Pseudo Selector Gotchas的更多相关文章

  1. 【CSS】Intermediate7:Pseudo Elements

    1.selector:pseudo element{property:value;} 2.first-letter  first-line CSS3:: 与pseudo class 区别 old br ...

  2. 【CSS】Intermediate2:Pseudo Classes

    1.specify a state or relation to the selector selector:pseudo_class { property: value; } 2.Link 3.Dy ...

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

  4. [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

    DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hi ...

  5. CSS元素选择器 element selector(type selector)

    http://www.w3school.com.cn/css/css_selector_type.asp 元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如 ...

  6. 阅读jQuery源码的18个惊喜

    注释:本文使用$.fn.method指代调用一系列选中的元素的方法.例如,$.fn.addClass,指代$('div').addClass(‘blue’) 或 $('a.active’).addCl ...

  7. Django项目：CRM(客户关系管理系统)--81--71PerfectCRM实现CRM项目首页

    {#portal.html#} {## ————————46PerfectCRM实现登陆后页面才能访问————————#} {#{% extends 'king_admin/table_index.h ...

  8. Django项目：CRM(客户关系管理系统)--57--47PerfectCRM实现CRM客户报名流程02

    图片另存为  16*16  名字修改为      bpm_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.co ...

  9. Django项目：CRM(客户关系管理系统)--47--38PerfectCRM实现全局账号登录注销02

    图片另存为  16*16  名字修改为      global_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap ...

随机推荐

  1. [转帖]QC 和 PD：关于你所不知道的快充

    QC 和 PD:关于你所不知道的快充 http://www.sohu.com/a/276214250_465976 2018-11-18 06:02 当我们使用支持 PD 或者 QC 快充协议的电源适 ...

  2. nohup 后台运行脚本，且可以实时查看日志

    -u加在python上 python命令加上-u(unbuffered)参数后会强制其标准输出也同标准错误一样不通过缓存直接打印到屏幕. 这是因为python的缓存机制所决定的 如果是使用 nohup ...

  3. Python-18-类的内置属性

    1. __getattr__.set__attr__.__delattr__ class Foo: x=1 def __init__(self,y): self.y=y def __getattr__ ...

  4. nodejs的安装与npm的介绍

    Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.本文详细介绍了No ...

  5. 【HC89S003F4开发板】9ASM写定时器1

    HC89S003F4开发板ASM写定时器1 一.实现过程 1.外部寄存器设置 扩展 XSFR 采用和 XRAM 同样的访问方式,使用 MOVX A, @DPTR 和 MOVX @DPTR ,A 来进行 ...

  6. docker xfs卡死

    原因 docker在xfs文件系统中,过于频繁create/destory container.pull/push image,当thin pool满时,DeviceMapper后端默认文件系统xfs ...

  7. LOJ3049 [十二省联考2019] 字符串问题 【后缀自动机】【倍增】【拓扑排序】

    题目分析: 建出后缀自动机,然后把A串用倍增定位到后缀自动机上,再把B串用倍增定位到后缀自动机上. SAM上每个点上的A串根据长度从小到大排序,建点,依次连边. 再对于SAM上面每个点,连到儿子的边, ...

  8. 题解-AtCoder ARC-078F Mole and Abandoned Mine

    problem ATC-arc078F 题意概要:给定一个 \(n\) 点 \(m\) 边简单无向图(无自环无重边),边有费用,现切去若干条边,使得从 \(1\) 到 \(n\) 有且仅有一条简单路径 ...

  9. 在论坛中出现的比较难的sql问题：39(动态行转列 动态日期列问题)

    原文:在论坛中出现的比较难的sql问题:39(动态行转列 动态日期列问题) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉 ...

  10. SS L服务

    WebHttpBinding _binding = new WebHttpBinding(); WebServiceHost ws = new WebServiceHost(typeof(Servic ...