iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
5
Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列 第 20

:empty 空值選取器 - 比谷關的空氣更乾淨的選取器

  • 分享至 

  • xImage
  •  

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧


:empty 空值選取器!這個選取器真是超有趣的!他專門選取那些內容是空的物件,你以為是像谷關的空氣這樣純淨透明的選取器嗎? 不! 它比谷關的空氣更乾淨,它是連空氣都沒有喔。:empty 的語法是 物件:empty,或者你連物件都不寫也是可以啦,舉個例子我們來看看他的作用

HTML

<div>1</div>
<div></div>
<div>3</div>
<div> </div>

<span>1</span>
<span></span>
<span>3</span>
<span> </span>

CSS

:empty{
	display: block;
	width: 200px;
	height: 30px;
	background-color: red;
}

上面這段原始碼會讓你畫面中空的 div 以及 span 變成紅色區塊,但是你會覺得很奇怪,就是不管是 div 還是 span ,第四個都不會變紅色,這是因為兩者裡面都被 Amos 特別加了一個空白字元進去(就是一個空白鍵的意思啦),所以這樣就可以知道所謂的空值就是「完全的沒有內容」,連個空白的空間都不給你喔。當然我們也可以利用增加選取條件的做法來選到我們想要的對象,有想到嗎? .....................對! 就是使用 Amos 之前寫的 CSS 組合式宣告 - 新手開發從這裡開始進步 ,像是下方這樣

div:empty{ ...略 }

這樣就可以只選到空的 div 標籤了,但是一般來說我們通常不會把標籤就這樣不加任何的 class 或 id 的晾在那裏,多數的開發者大多會為他添加一個或多個 class,所以例如以下例子

HTML

<div class="badge"></div>

我們就可以用以下CSS來設定,當該區塊有內容的時候,要顯示出來,但是如果沒有資料的話,就不顯示

.badge{
	width: 20px;
	height: 20px;
	background-color: red;
	color: #fff;
	text-align: center;
}
.badge:empty{
	display: none;
}

上面這樣處 理了之後,我省下了程式一個判斷式,那這種技巧用在哪裡呢? 其實知名的框架 Bootstrap 就有用到,此外臉書上面的未讀訊息數也可用到這種技巧來製作
https://ithelp.ithome.com.tw/upload/images/20191005/20112550YyCibK0289.jpg

客戶激發出來的應用

曾經有個客戶對我這麼說: 「我想要這個區塊有資料的時候就出現,沒有資料的時候就不出現」,聽起來很常聽到且合理對吧? 但是阿,這是個靜態頁面,你要我去生程式給你說真的我還懶懶的說,但是沒辦法啊,客戶說了我只好盡量配合,畢竟客戶給的錢不少我是一個熱血的開發者阿!

增加一個程式判斷不難,但是用 CSS 寫更簡單你相信嗎? 讓我們來看看這個需求

<div class="wrap">
	<div class="sideA"></div>
	<div class="sideB"></div>
	<div class="contain">我是內容</div>
</div>

上面這段原始碼中 .contain 區塊是我主要的內容區,而 .sideAsideB 則是側邊欄,如果側邊欄中任何一欄沒有內容的話,.contain 區塊的寬度就要補上,這時你就會有個疑問了,~~為什麼側邊欄會沒有資料(劃錯重點)~~會不會有同時側邊欄被消失的狀況? 這當然不用問,因為我直接寫完就好了啊,還問幹嘛?

當初我是接到 float 的需求,這次為了偷懶響應大家喜歡用 flex 的狀況,就改用 flex 比較省事吧,首先 Amos 先將三個版面寬度處理好並且利用 flex 來讓其橫排,像是下面這樣

.wrap{
	width: 900px;
	margin: auto;
	display: flex;
}
.sideA{
	width: 200px;
	height: 400px;
	background-color: #AAA;
}
.sideB{
	width: 200px;
	height: 400px;
	background-color: #FAA;
}
.contain{
	width: 500px;
	background-color: #AAF;
}

接著我們來讓側邊欄 .sideA 消失

.sideA{
	...略
	display:none;
}

接著就可以看到 .contain 區塊自動填滿整塊範圍了,多省事阿! 這是因為 flex 預設 flex-grow 屬性會讓你的區塊自動填滿,看完這樣的原理之後,那我就只需要補上讓側邊欄被消失的條件就好了,像是下面這樣

.sideA:empty,
.sideB:empty{
	display:none;
}

搞定! (你可以點擊這邊來看我的 codepen 例子)這樣就可以完全不靠任何程式達成動態版面寬度的目的了,是不是很簡單呢? (工程師說很好這個我可以),很單純的一個選取器對吧, Amos 僅舉出一個小小的應用,希望各位喜歡啦

以上就是今天的 金魚都能懂的 CSS 選取器 - :empty 空值選取器 - 比谷關的空氣更乾淨的選取器,如果文中描述有誤歡迎各位前輩不吝指正,各位金魚我們明天見~

金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
::first-line 首行選取器 - 低調到不行的選取器
下一篇
:not() 否定選取器 - 一個搞排擠的選取器
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
King Tzeng
iT邦新手 3 級 ‧ 2019-10-05 14:55:48

客戶激發出來的應用那段我笑了XDDD/images/emoticon/emoticon37.gif

看到標題我就笑了/images/emoticon/emoticon37.gif

https://ithelp.ithome.com.tw/upload/images/20191204/20119546sMSJeThsBC.jpg

1
阿展展展
iT邦好手 1 級 ‧ 2019-12-04 10:16:52

每天看著辦公室外面的天空.....哎呀 似乎有顆粒呢/images/emoticon/emoticon10.gif

CSScoke iT邦新手 3 級 ‧ 2019-12-04 19:23:53 檢舉

快拉上窗簾,揉揉眼睛,這一定是自己的眼睛業障重

我要留言

立即登入留言