รู้จักกับ CSS Selectors Level 4
Published in
2 min readFeb 1, 2014
ขอขอบคุณ Guest Post จากคุณ Krissanawat Kaewsanmuang
ติดตามผลงานเพิ่มเติมได้ที่ http://taqmaninw.com
การเปลี่ยนแปลงหลักๆ ใน CSS Selector Level 4 คือจะมีการเพิ่ม pseudo-classes ใหม่เข้ามาเยอะมากเลยครับ เราลองมาดูกันว่า pseudo-classes เหล่านี้ มีอันไหนที่น่าสนใจบ้าง
Logical Combinations
:matches
ใช้ในการรวมกลุ่ม selectors เข้าด้วยกัน ลองดูตัวอย่างนี้
/* เมื่อก่อนเวลาเราจะเลือก dom ที่มีหลายสถานะ เราจะเขียนแบบนี้ใช่มั้ยครับ */
a:link, a:hover, a:visited, a:focus{
color:red;
}/* แต่ถ้าเราใช้ :matches เราก็จะสามารถเขียนแบบนี้ได้ครับ */
a:matches(:link, :hover, :visited, :focus){
color:red;
}
ทีนี้เราลองมาดูตัวอย่างที่ซับซ้อนขึ้นอีกนิดนึง:matches(section, article, aside) h1 {
font-weight: bold;
}/* ซึ่งจะมีค่าเหมือนกับการเขียนแบบด้านล่างนี้ */
section h1, article h1, aside h1 {
font-weight: bold;
}:notคล้ายกับ matches แต่กลุ่มของ selectors ที่รวมไว้นั้นจะต้องไม่อยู่ใน selector ที่เป็น parent ลองดูตัวอย่างนี้p:not(.active, .visible) {
color: red;
}ผลที่ออกมาคือ p ที่ไม่ได้เป็น .active และ .visible จะกลายเป็นสีแดงหมด ทีนี้ลองมาดูอีกตัวอย่างหนึ่งh1:not(#title, .active){
color: black;
}h1 ที่ไม่ได้เป็น #title และ .active จะกลายเป็นสีดำหมด
Location Pseudo-classes
:any-link
ใช้ในการรวม a:link กับ a:visited เข้าด้วยกัน/* เดิมเราจะเขียนแบบนี้ */
a:link, a:visited{
color: blue;
}/* หากใช้ :any-link เราจะสามารถเขียนได้สั้นลง แบบนี้ */
a:any-link{
color:blue;
}:local-linkpseudo-class นี้จะแบ่งการใช้งานออกเป็น 2 รูปแบบด้วยกันดังนี้non-functionalการใช้แบบนี้จะหมายถึง link ที่มี url เดียวกับหน้าปัจจุบัน หรือพูดง่ายๆ ก็คือ link ที่ active อยู่นั่นเองnav:local-link {
text-decoration: none;
}
/* link ที่ active อยู่จะไม่มีเส้นใต้ */functionalส่วนการใช้แบบนี้ เราจะสามารถใส่จำนวนเต็มบวกให้เป็น argument ของ :local-link ได้ โดยจำนวนที่เราใส่ไปนั้นจะหมายถึงจำนวน segments ของ url ลองดูตัวอย่างต่อไปนี้nav:local-link(0) {
color: red;
}
/* มีผลกับ link ที่ url มีโดเมนเดียวกับหน้านี้ เช่น http://taqmaninw.com/* */nav:local-link(1) {
color: green;
}
/* มีผลกับ link ที่ url มีโดเมนเดียวกับหน้านี้ และมี 1 segment เช่น http://taqmaninw.com/2013/ */nav:local-link(2) {
color: blue;
}
/* มีผลกับ link ที่ url มีโดเมนเดียวกับหน้านี้ และมี 2 segment เช่น http://taqmaninw.com/tag/laravel4/ */nav:local-link(3) {
color: yellow;
}
/* มีผลกับ link ที่ url มีโดเมนเดียวกับหน้านี้ และมี 3 segment เช่น http://taqmaninw.com/tag/laravel4/something/ */Time-dimensional Pseudo-classespseudo-classes กลุ่มนี้จะมีประโยชน์กับผู้ที่ใช้งาน screen reader ในการอ่านข้อความบนเว็บไซต์ออกมาเป็นเสียงพูด โดยเราจะสามารถกำหนด style ของข้อความให้เข้ากับการอ่านของ screen reader ได้ว่า มันได้อ่านข้อความตรงนี้ไปแล้วหรือยัง คล้ายๆ กับการเน้นสีข้อความใน karaoke:past(p, li, dt, dd) {
/* สไตล์ของข้อความที่ screen reader อ่านไปแล้ว */
}:current(p, li, dt, dd) {
/* สไตล์ของข้อความที่ screen reader กำลังอ่านอยู่ */
}:future(p, li, dt, dd) {
/* สไตล์ของข้อความที่ screen reader ยังไม่ได้อ่าน */
}Parent Selectorในการเขียน selector เราจะเรียก element ที่ได้รับผลจาก selector นั้นๆ ว่า "Subject" ซึ่งก็คือ "selector ย่อย" ตัวที่อยู่ด้านขวาสุดนั่นเอง แต่สำหรับ css selectors level 4 นี้ เราสามารถเลือกเองได้ว่า อยากจะให้ subject ของ selector นั้น เป็น selector ย่อยตัวไหน ด้วยการใส่ "!" เอาไว้ที่ด้านหน้า selector ย่อยตัวนั้นๆul li a.active {
text-decoration: none;
}
/* โดยปกติแล้ว subject จะเป็น selector ย่อย ด้านขวาสุด
ซึ่งในที่นี้ก็คือ a.active */ul !li a.active {
background: black;
}
/* เราสามารถเลือก subject เองได้ด้วยการใส่ "!"
ไว้ข้างหน้า selector ย่อย ที่เราต้องการ
สำหรับตัวอย่างนี้ จะเป็นการกำหนดสไตล์ให้กับ
li ที่เป็นลูกหลานของ ul และมีลูกหลานเป็น a.active */บทสรุปหลังจากที่อ่าน draft ดูคร่าวๆ ผมพบว่าส่วนที่เพิ่มเข้ามา หลักๆ จะเป็นส่วนที่ช่วยสร้างเงื่อนไขในการเลือกให้สามารถระบุได้เจาะจงมากยิ่งขึ้นครับ จริงๆ แล้ว ยังมี pseudo-classes อีกมากที่ผมยังไม่ได้พูดถึง เพื่อนๆ ที่สนใจอยากลองเล่น สามารถเข้าไปตรวจดูว่า web browser ของท่านรองรับแล้วหรือยังได้ที่เว็บ CSS4-Selectors ครับ
