[css] 挑出最後一個與第一個元素

css

Zaku 2019-03-29 15:01:12 ‧ 8864 瀏覽

分享至

想請問一下假定有n個元素，有辦法挑出第一個跟最後一個元素設定不同樣式嗎?

假設結構如下:

<div class="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    .
    .
    .
    <div class="b"></div>
</div>

a底下有n個b，可否挑出第一個b和最後一個b

moonfish iT邦新手 4 級 ‧ 2019-03-29 15:05:24 檢舉

jquery .first() 跟 .last() 可以做到

froce iT邦大師 1 級 ‧ 2019-03-29 15:38:10 檢舉

https://www.w3schools.com/cssref/css_selectors.asp

Zaku iT邦新手 3 級 ‧ 2019-04-01 17:33:06 檢舉

感謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-03-29 15:05:06

最佳解答

.a .b{color:#000}
.a .b:first-child{color:#fff} #第一個
.a .b:last-child{color:#ccc}  #最後一個

回應 2
分享
檢舉

Zaku iT邦新手 3 級 ‧ 2019-04-01 17:25:43 檢舉

感謝大大https://www.w3schools.com/cssref/sel_last-of-type.asp
這個也可以吧

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-04-02 09:07:20 檢舉

是的。這是針對子元素的控制。不過我很少用這個就是了。
因為指定class的方式會比較適合我的控制。

登入發表回應

舜~

iT邦高手 1 級 ‧ 2019-03-29 17:26:07

樓上應該就能回答樓主，小弟來湊一腳XD

位置|jquery | css(copy樓上浩瀚星空的)
--|--
第一個|$('div.b:first') ； $('div.b').first() ； $('div.b:nth-child(1)')；$('div.b:eq(0)')；| .a .b:first-child{color:#fff}
最後一個|$('div.b:last') ； $('div.b').last()；$('div.b:eq(-1)')；| .a .b:last-child{color:#fff}

用jQuery抓出第一個獲最後一個元素，就可以自己DIY，動態處理樣式了~~

jquery、css的選擇器基本上是一樣的
:eq(N), :nth(N)：找出選擇結果集 index 為 N 的 elements
:gt(N)：找出結果集中索引大於 N 的 elements
:lt(N)：找出結果集中索引小於 N 的 elements
:first：找出結果集中的第一個 element (相當於 eq(0) 或者 nth(0))
:last：選擇結果集中的最後一個 element
更多可參考：https://ithelp.ithome.com.tw/articles/10095237

備註：
first-child、last-child小弟在jquery上面測試不符預期，您要自行測試一下