8 CSS3 Selectors ที่คุณต้องรู้จักมัน

web 2.0Thursday, October 23, 2014 - 21:57

Selector คือ HTML elements หรือ elements ที่ CSS Rule นำไปใช้เพื่อกำหนดค่าต่างๆ เช่น สี ขนาดกว้างสูง เป็นต้น ผมคงไม่อธิบายลงลึกมากนะครับ เพราะวันนี้ผมจะมาพูดถึง selector ของ CSS3 โดยเฉพาะที่เพิ่มเข้ามา ถ้าเรารู้จักวิธีใช้มันจะทำให้เราเขียน CSS สนุกขึ้นอีก เรามาดูกันว่ามีอะไรบ้าง

E[foo^="bar"]

E คือ html element , foo คือ attribute (id หรือ class) , bar คือ ค่าที่เลือก

Selector แบบนี้การทำงานของมันก็คือ ถ้า E มี attribute ที่ขึ้นต้นด้วย bar มันจะเลือกมาทั้งหมด เช่น

HTML

<p id="val-1">HTMLxprs</p>
<p id="val-2">SitePoint</p>
<p id="val-3">EggheadIO</p>
<p id="val-4">SotchIO</p>
<p id="some-val">Not a value</p>

CSS

p[id^="val"]{
        color: red
}

จากตัวอย่างข้างบน p ไหนก็ตามที่มี id ที่ขึ้นต้นด้วย val จะมีตัวอักษรสีแดง

E[foo$="bar"]

หลังจากนี้ผมคงไม่อธิบายเพิ่มเกี่ยวกับชื่อสมมติที่ผมกำหนดขึ้นมา เช่น E, foo และ bar เพราะมันก็เหมือนกับตัวบน แต่จะอธิบายการทำงานของมันเลยละกัน

Selector แบบนี้การทำงานของมันก็คือ ถ้า E มี attribute ที่มี bar อยู่หลังสุดมันจะเลือกมาทั้งหมด เช่น

HTML

<p id="val-1">HTMLxprs</p>
<p id="val-2">SitePoint</p>
<p id="val-3">EggheadIO</p>
<p id="val-4">SotchIO</p>
<p id="some-val">Not a value</p>

CSS

p[id$="val"]{
        color: red
}

จากตัวอย่างนี้ p ตัวสุดท้ายจะมีตัวอักษรสีแดง เพราะ p มี id ที่มีค่า val อยู่ท้ายสุด

E[foo*="bar"]

Selector แบบนี้การทำงานของมันก็คือ ถ้า E มี attribute ที่มี bar อยู่ส่วนไหนก็ได้มันจะเลือกมาทั้งหมด เช่น

HTML

<p id="val-1">HTMLxprs</p>
<p id="val-2">SitePoint</p>
<p id="val-3">EggheadIO</p>
<p id="val-4">SotchIO</p>
<p id="some-val">Not a value</p>

CSS

p[id*="val"]{
        color: red
}

จากตัวอย่างนี้ p ตัวทุกตัวจะมีสีแดง เพราะมีค่า val อยู่ใน id

E:nth-child(n)

Selector แบบนี้การทำงานของมันก็คือ มันจะทำการเลือก E ตัวที่ n โดยเริ่มนับจาก element ที่มันอยู่ข้างใน ผมอธิบายแล้วจะสงสัยอยู่ ลองดูตัวอย่างแล้วกัน

HTML

<body>
        <div>
                <p>Lorem Ipsum Donor</p>
                <p>Lorem Ipsum Donor</p>
                <p>Lorem Ipsum Donor</p>
                <p>Red text</p>
                <p>Lrem Ipsum Donor</p>
        </div>

        <div>
                <p>Ipsum Donor</p>
                <p>Ipsum Donor</p>
                <p>Ipsum Donor</p>
                <p>Red text</p>
                <p>Ipsum Donor</p>
        </div>
</body>

CSS

p:nth-child(3){
        color: red;
}

จะสังเกตุว่า p นั้นอยู่ภายใน div ดังนั้น selector ที่เราเขียนไว้มันก็จะนับ p ตัวสาม ทำให้เป็นสีแดง

E:nth-last-child(n)

Selector ตัวนี้จะเหมือนกับตัว E:nth-child(n) เลย เพียงแต่ว่าตัวนี้จะนับจาก element ตัวสุดท้ายไล่ขึ้นมาด้านบน

E:first-child and E:last-child

Selector สองตัวนี้ใช้การใช้งานเหมือนกันต่างกันแค่ :first-child จะเลือกตัวแรกสุด และ :last-child จะเลือกตัวสุดท้าย

HTML

<p>Lorem Ipsum Donor first child</p>
<p>Lorem Ipsum Donor</p>
<p>Lorem Ipsum Donor</p>
<p>Lorem Ipsum Donor</p>
<p>Lorem Ipsum Donor last child</p>

CSS

p:first-child{
        color: green;
}
p:last-child{
        color: red;
}

E:not(s)

ตัวนี้ไว้ใช้สำหรับเมื่อเราต้องการเลือก E ทั้งหมด แต่ยกเว้น s (selector) ไว้

HTML

<p>Lorem Ipsum Donor 1</p>
<p>Lorem Ipsum Donor 2</p>
<p>Lorem Ipsum Donor 3</p>
<p>Lorem Ipsum Donor 4</p>
<p>Lorem Ipsum Donor 5</p>

CSS

p:not(:first-child){
        color: green;
}

ตัวอย่างด้านบนก็คือ มันจะเลือก p ทั้งหมดยกเว้น p ตัวแรก :first-child

ทั้งหมดนี้เป็น Selector ของ CSS3 ที่ผมเลือกมาใช้งานเป็นประจำ ลองนำไปใช้งานดูครับ

แนะนำให้อ่าน

แสดงความคิดเห็น