5 種你一定要會的 CSS 選擇器 - 大幅減少 JS 的使用，製作網頁更有效率

相信 CSS 選擇器對寫網頁的人都不陌生，除了常用的 :hover、:actived、::after 之外，還有其它超很好用的 CSS 選擇器，用的好的話甚至可以取代部份的 JS 程式碼，今天我就整理了 5 個我覺得一定要知道的選擇器用法給你，分別為：

1. nth-child()
2. nth-of-type()
3. is()
4. not()
5. has()

一、nth-child()

若我們想針對容器中間的特定子元素去做選取，卻又不想額外新 class 或 id 就可以用到 nth-child(n)。

比如我想選取第四個子元素，就可以使用 :nth-chuld(4)

<div>
  <p>first paragraph</p>
  <p>second paragraph</p>
  <p>third paragraph</p>
  <p>fourth paragraph</p>
  <p>fifth paragraph</p>
</div>

 div p:nth-child(4) {
  color: lightgreen
}

我們也可以用 3n 這種特殊的作法來或獲取第 3、6、9 ... 個子元素，或是用 CSS 提供的 odd / even 關鍵字來選取奇數或偶數。

div p:nth-child(even) {
  color: lightgreen;
} 

二、nth-of-type()

type 家族和 child 家族有點類似，基本用法是一樣的，都可以直接寫數字、odd、even 關鍵字，或 3n 這種特定的規律。

差別在於 child 不會區分元素的類型，type 可以針對元素類型來做選取。

先讓我們稍微更改 HTML：

<div>
  <p>first paragraph</p>
  <p>second paragraph</p>
  <a href="#">first link</a>
  <p>third paragraph</p>
  <a href="#">second link</a>
  <p>fourth paragraph</p>
  <p>fifth paragraph</p>
</div>

如果我們想跳過 a 指選取奇數的 p，就可以使用 p:nth-of-type(odd)

a {
  color: lightblue
}

div p:nth-of-type(odd) {
  color: lightgreen;
}

這裡放上和 child 的比較。

/* 使用 child */
div p:nth-child(odd) {
  color: lightgreen
}

可以發現中間的 third paragraph 沒有吃到，因為他是偶數的 child。

三、is( )

:is 可以一次組合多種選擇器，有點類似 , 的功能。

比如以下寫法就很適合用 :is 簡寫。

article h1,
article h2,
article h3 {
  font-family: 'poppins';
  color: #fff;
  margin-top: 8px;
  padding-left: 32px;
}

h1::before, h2::before, h3::before {
  content: '👉'
}

使用 :is 後

article:is(h1, h2, h3) {
  font-family: 'poppins';
  color: #fff;
  margin-top: 8px;
  padding-left: 32px;
}

:is(h1, h2, h3)::before {
  content: '👉'
}

特別的是，:is() 選擇器也可以搭配其它選擇器做出各種變化，這在選擇器非常長的情況下，相當好用，例如

form ul li input:hover, 
form ul li input:focu) {
  color: lightgreen
}

/* 簡寫成 */
form ul li input:is(:hover, :focus) {
  color: lightgreen
}

四、not()

:not() 可以選取不符合的元素，比如說我們可以這樣來選取不是 p 的元素

div :not(p) {
  color: lightgreen
}

:not() 非常好用，比如我們想把沒有 .active 類名的元素隱藏起來，就可以使用類似 .button:not(.active) 這種寫法

.button:not(.active) {
  display: none;
}

依此類推，not 使用的好可以大幅減少 JS 的判斷。

五、has()

:has() 是超強的選擇器，他可以用來判斷符不符合括號裡面的情況，比如說如果 div 裡有 a 就增加 border，我們就可以這樣寫。

div:has(a) {
  border: 1px solid white
}

我們甚至可以用來當作父選取器，比如當 a 被 hover 時，增加 div 的 border

div {
  border: 1px solid rgba(0,0,0,0);
  transition: 0.3s
}

div:has(a:hover) {
  border: 1px solid white
}

善用 has 可以做到許多意想不到的效果，甚至減少 JS 的程式碼。

小結

今天整理了五個超好用卻不常見的 CSS 選擇器，這些選擇器的兼榮幸已經越來越好了，前陣子 CSS 也多出了超多超酷炫的屬性，只是支援度還沒有很好，期待之後 CSS 的發展～