Yijen's blog

關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 324195

    累積人氣

  • 59

    今日人氣

    0

    訂閱人氣

常用的 CSS pseudo class (CSS偽類) 教學與練習 - PART1

好用的 Css Pseudo Class — 第一與最後

接下來的,你可能也看過,因為它很好用,實務上也經常被用到

  • :first-child
  • :last-child

CSS

.hozu{ width: 30px; height: 30px; background-color: #70BFE0; /* 藍 */ }
.hozu:first-child { background-color: #3E6256; /* 綠 */ }
.hozu:last-child {  background-color: #DE0000; /* 紅 */ }

HTML

<div>
  <div class="hozu">1</div>
  <div class="hozu">2</div>
  <div class="hozu">3</div>
  <div class="hozu">4</div>
  <div class="hozu">5</div>
  <div class="hozu">6</div>
  <div class="hozu">7</div>
  <div class="hozu">8</div>
  <div class="hozu">9</div>
  <div class="hozu">10</div>
</div>

Demo

1
2
3
4
5
6
7
8
9
10

就如想像的一樣,最前方的 盒子 及 最後一個 都變成了我們設定的 CSS Style

靈活性極高的 Css Pseudo Class — :nth-child(n)

:nth-child 在現今實務上可以說是運用非常頻繁的CSS偽類,無論是 odd/even 用在表格式大量資料排列的時候,適當地給予斑馬紋增加可讀性;或是兩兩間隔、的排序美化,都可以玩。

  • :nth-child(n)
  • :nth-child(odd/even)
  • :nth-child(xN+y)

首先來玩玩比較簡單的「奇偶」吧!

CSS

.hozu:nth-child(odd)  { background-color: red; }
.hozu:nth-child(even) { background-color: black; }

Demo

1
2
3
4
5
6
7
8
9
10

直接看CSS和實際DEMO呈現後應該就一目瞭然了吧?這個偽類在設計表格時特別好用,只要將 tr:nth-child(odd/even) td 設定成不同底色,閱讀起來就會好很多(當然也不要弄得反差太大就是了)XD

接下來是 :nth-child(n) 的用法。

:nth-child(n) 裡的 n 代表的就是父層之下的第幾個child,且是從1開始算喔(不是0),這點和 jQuery 的 :eq(n) 稍有不同。

CSS

.hozu:nth-child(3) { background-color: navy; } /* 第3個 */
.hozu:nth-child(7) { background-color: gold; } /* 第7個 */

Demo

1
2
3
4
5
6
7
8
9
10

最後要說明的是 :nth-child(xN + y) 的用法,這比較難理解一點,但搭配實例應該比較清楚

CSS

我想要找到 child 是4的倍數的

.hozu:nth-child(4n) { background-color: orange; } 

Demo

1
2
3
4
5
6
7
8
9
10

很好!找到了第4與第8;那如果我把改寫成 :nth-child(4n+1) 呢?會跑出哪幾個?

答案揭曉

找到第 1,5,9 個

1
2
3
4
5
6
7
8
9
10

從以上二例可以看出,單獨只寫n是指定第n個子項;Xn則是找出倍數為X的子項,而Xn+1 則是找出倍數X+1的子項,且他會回推,若你想撈的子項從1開始,那麼Y就是為1,每隔X抓出下一個子項。

Y可以+1,那也可以-1吧?來試一下唄。

CSS

.hozu:nth-child(6n-2) { background-color: #009246; /* 綠 */ }
.hozu:nth-child(6n-1) { background-color: #FFFFFF; /* 白 */ } 
.hozu:nth-child(6n) {   background-color: #CE2B37; /* 紅 */ }

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

從上例中,可以發現第 6,12,18,24 子項全部變成我們想要的紅色,而這些選中項目的往前1個及往前2個就是 6n-16n-2 的樣式了

反向搜尋的 Css Pseudo Class

  • :nth-last-child(n)

這個項目就不特別寫範例了,基本上用法和 :nth-child(n) 一樣,差別在於它是由後面開始找起。

更確實的篩選 — 找類型

  • E:nth-of-type(n)

這個 pseudo class 比較冷癖,但實務上能用上它的機會不少,只是多數人(包括以前的自己)不曉得怎麼用而已

簡單描述一下,它意在找出,在一個 Parent 底下,找尋第 n 個 E(element),有點模糊是吧?來看下方的 Sample

 

HTML

<div class="parent">
    <h1>Article title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur... </p>
    <p>Fuga, aperiam amet! Repellendus deserunt... </p>
    <p>Suscipit consequuntur distinctio impedit... </p>
</div>

我們有一個 div.parent 裡面有一個 h1 和三個 p

Demo

Article title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ratione illo laudantium culpa, earum eos tenetur, repellat laborum, qui tempore, quia ad vero! Accusantium, ipsam minus vitae asperiores hic quasi.

Fuga, aperiam amet! Repellendus deserunt quis atque error expedita aut fuga, delectus cumque dolor. Vel, temporibus qui repellendus, ducimus saepe fugit et atque maiores, alias rem, esse veniam laborum. Nemo.

Suscipit consequuntur distinctio impedit voluptatum, deserunt, tempore repudiandae quaerat est molestias, maxime odio explicabo inventore harum. Suscipit, similique ipsam illo aliquid esse voluptates consequuntur labore tempora molestias at sunt. Nulla.

這時,若我們想讓第二段文字變成紫色,該怎麼寫? 先用剛才練習到的 :nth-child(n) 來試試吧!

CSS

.parent p:nth-child(2) {
    color: purple;
}

CSS寫起來很合理對吧,但結果卻是?...

Result - NG

Article title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ratione illo laudantium culpa, earum eos tenetur, repellat laborum, qui tempore, quia ad vero! Accusantium, ipsam minus vitae asperiores hic quasi.

Fuga, aperiam amet! Repellendus deserunt quis atque error expedita aut fuga, delectus cumque dolor. Vel, temporibus qui repellendus, ducimus saepe fugit et atque maiores, alias rem, esse veniam laborum. Nemo.

Suscipit consequuntur distinctio impedit voluptatum, deserunt, tempore repudiandae quaerat est molestias, maxime odio explicabo inventore harum. Suscipit, similique ipsam illo aliquid esse voluptates consequuntur labore tempora molestias at sunt. Nulla.

怎麼第一段變成紫色了?嗯……這裡有個陷阱,:nth-child(n) 在使用的時候,要確保 parent 底下的子項都是同一種 type,也就是它們要不全是 p 不然就全是 div,而在此例我們裡面有1個 h1 和3個 p 所以就搞混了。

這個時候 E:nth-of-type(n) 就派上用場了

CSS(改良版)

.parent p:nth-of-type(2) {
    color: purple;
}

Result - Success

Article title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ratione illo laudantium culpa, earum eos tenetur, repellat laborum, qui tempore, quia ad vero! Accusantium, ipsam minus vitae asperiores hic quasi.

Fuga, aperiam amet! Repellendus deserunt quis atque error expedita aut fuga, delectus cumque dolor. Vel, temporibus qui repellendus, ducimus saepe fugit et atque maiores, alias rem, esse veniam laborum. Nemo.

Suscipit consequuntur distinctio impedit voluptatum, deserunt, tempore repudiandae quaerat est molestias, maxime odio explicabo inventore harum. Suscipit, similique ipsam illo aliquid esse voluptates consequuntur labore tempora molestias at sunt. Nulla.

成功了!雖然 h1 也是 child,但此偽類指定了我要找的是 p,只針對第 2 個來變色。
所以說 E:nth-of-type(n) 適合用來選取一個 parent 裡有複數不同種 type 的 E(Element) 的 CSS Pseudo Class

殺手級好用的 Css Pseudo Class — 不是我 XD

  • :not(selector)

這個偽類真的很好用,大推所以要留在最後講。其實用法很直覺,就是在一堆 elem 裡面排除某些 elem 後剩下的「目標」

HTML

<div class="parent">
    <h1>h1</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Distinctio architecto nam iure sed...</p>
    
    <h2>h2</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Repudiandae neque laborum earum reprehenderit...</p>
    
    <h3>h3</h3>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Sapiente id numquam, perferendis rem...</p>

    <span class="note">i am a span...</span>

    <p>Sapiente id numquam, perferendis rem...</p>    
</div>

CSS

.parent :not(p) { background-color: #D3D3D3; } /* .parent 底下所有"不是P"的東東 */

Demo

h1

Lorem ipsum dolor sit amet...

Distinctio architecto nam iure sed...

h2

Lorem ipsum dolor sit amet...

Repudiandae neque laborum earum reprehenderit...

h3

Lorem ipsum dolor sit amet...

Sapiente id numquam, perferendis rem...

i am a span...

Sapiente id numquam, perferendis rem...

找出了 .parent 裡面所有不是 p 的元素並加上底色,很方便吧?當然如果只有這樣用,我就不會稱呼他為殺手級了 XD 來看看進階的用法

舉個例,我們常作 grid layout 的時候,我們通常希望每一格會有 right border or bottom border,但當他們是最下或最右的時候,卻不想要

因此我們會如此寫CSS

CSS

div {
    border-right: 4px solid #BCBCBC;
}
div:nth-child(3n) {    
    border-right: none;
}

Demo

像是這樣的 Layout 每格佔三分之一,設定 right border 當成 divider,但是在最右側那一格(也就是3的倍數時)我們把 border 重置為 none; 這是實務上很常見的

但其實有更好的寫法,也就是 :not(selector) 的進階用法。

CSS

div:not(:nth-child(3n)) {
    border-right: 4px solid #76B900;
}

相同的效果,我們直接指定「不是3的倍數的 div 才加上 border」這樣只要寫一次CSS就可以了 :D

由此例,可以發現 :not(selector) 不僅僅可以指定「元素」,也可以指定「偽類(偽元素)」,這樣一來,它的應用範圍就更廣了。

這集先寫到這裡了……下集將介紹下面的其他 Css Pseudo Classes / Elements

  • :before
  • :after
  • :empty
  • :target

つづく……

參考資料
www.w3schools.com
延伸閱讀
常用的 CSS pseudo class (CSS偽類) 教學與練習 - PART2
相簿設定
標籤設定
相簿狀態