Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

Day11-相鄰兄弟選擇器-兄弟情深,只挑最近的!

Next-Sibling Combinator

相鄰兄弟選擇器(Next-Sibling Combinator)用於選中指定元素緊接在後的第一個兄弟元素,忽略其他不緊接的兄弟元素。

想像一下,家裡有大哥、二姊、三妹、四弟,遛狗的任務通常是由年紀最大的大哥負責。可是如果大哥突然生病了,這時候誰來頂替呢?當然是緊接著的大哥之後的手足,也就是二姊啦!至於三妹和四弟?他們得等二姊忙不過來的時候才能輪到呢~



💠 相鄰兄弟選擇器-基本用法

語法

1
2
3
選擇器1 + 選擇器2 {
屬性名: 屬性值;
}
  • 選擇器1 是要選中的基準元素。
  • 選擇器2 是相鄰於 選擇器1 的第一個兄弟元素。

範例

選中 .lala 類別後緊接著的第一個 <p> 元素

1
2
3
4
<p>Lala 的哥哥</p>
<div class="lala">Lala</div>
<p>Lala 的大妹</p>
<p>Lala 的小弟</p>
1
2
3
.lala + p {
color: red;
}

在此範例中,只有接在 .lala 類別之後的 <p> 會變成紅色,最後一個 <p> 不會受到影響。

Next-Sibling Combinator



💠 實務應用:表單驗證提示訊息

當用戶未填寫必填欄位時,顯示錯誤提示:

1
2
3
<label>帳號</label>
<input type="text" required>
<span class="error">此欄位必填</span>
1
2
3
4
5
6
7
input:invalid + .error {
display: inline;
color: red;
}
input:valid + .error {
display: none;
}

有填寫時將隱藏錯誤驗證

See the Pen Next-sibling Combinator by Lala (@bobee) on CodePen.

在此範例中,當輸入框的值無效時,錯誤提示會顯示為紅色;當值有效時,錯誤提示會隱藏。

💠 總結

相鄰兄弟選擇器(+)選取元素中緊接著的第一個兄弟元素,適合用於處理需要依賴相鄰結構的樣式變化。



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️