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. java通过jasper文件生成jpg图片

    iReport资料紧俏,整理好就赶紧传上来: 工具类:JpgExport public class JpgExportUtil { public static String Export(Map< ...

  2. python 之 并发编程（线程Event、协程）

    9.14 线程Event connect线程执行到event.wait()时开始等待,直到check线程执行event.set()后立即继续线程connect from threading impor ...

  3. STM32中引脚复用说明

    端口复用的定义 STM32有许多的内置外设(如串口.ADC.DCA等等),这些外设的外部引脚都是和GPIO复用的.也就是说,一个GPIO如果可以复用为内置外设的功能引脚,那么当这个GPIO作为内置外设 ...

  4. 1.MVC基础-初识MVC，与WebForm比较

    1.Net WebForm的开发模式

  5. css 点击样式，水波纹（记录备用）

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  6. mysql 系统变量

    show variables; ---------------------------------+-------------------------------------------------- ...

  7. Sharding-JDBC介绍

    Sharding-JDBC是当当应用框架ddframe中,从关系型数据库模块dd-rdb中分离出来的数据库水平分片框架,实现透明化数据库分库分表访问.Sharding-JDBC是继dubbox和ela ...

  8. 最新版Navicate破解激活

    2019年5月5日激活成功 版本12.1.18 Navicat12.1下载地址 http://www.navicat.com.cn/download/navicat-premium有32位和64位,大 ...

  9. C++实现企业链表（单向链表的另外一种实现方式）

    LinkList.h #include <windows.h> #include <stdio.h> // 链表小结点 typedef struct LINKNODE { LI ...

  10. stm32 CAN通信 TJA1040

    CAN协议特点 1.多主控制 所有单元都可以发送消息,根据标识符(Identifier简称ID)决定优先级.仲裁获胜(被判定为优先级最高)的单元可继续发送消息,仲裁失利的单元则立刻停止发送而进行接收工 ...