本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 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 就有用到，此外臉書上面的未讀訊息數也可用到這種技巧來製作

客戶激發出來的應用

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

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

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

上面這段原始碼中 .contain 區塊是我主要的內容區，而 .sideA 及 sideB 則是側邊欄，如果側邊欄中任何一欄沒有內容的話，.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 選取器 - 金魚都能懂了你還怕學不會嗎 系列

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

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

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

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