สวัสดีครับ กลับมากันอีกครั้ง กับ พื้นฐาน CSS กันอีกแล้วนะครับ ซึ่งบทความนี้จะเป็นบทความสุดท้ายของปีนี้และของเรื่อง การประกาศ Selector กันแล้วนะครับ ว่าแล้วมาเข้าเรื่องกันเลยดีกว่าครับ
จากคราวก่อน ๆ เราได้ผ่านไป Selector ทั้งหมด 3 แบบ แล้วนะครับและนั่นก็คือ
1.) Element
2.) Class
3.) ID
ในบทความนี้จะพามารู้จักกับตัวสุดท้ายกันแล้วนะครับนั่นก็คือ Attribute ครับ
ซึ่งตัวนี้นั้นจะนิยมใช้กับพวก Element ที่เป็น input สะส่วนใหญ่ครับ เพราะตัว input เองค่อนข้างมีหลาย type เพราะฉนั้นการประกาศ Selector รูปแบบนี้จึงเป็นการจัดรูปแบบของ CSS ที่เรียบง่ายและเหมารวมมากที่สุด วิธีประกาศคือการสร้าง [] หรือ วงเล็บก้ามปู ( Brackets )ไว้ด้านหน้า {} ( ปีกกา ) แล้วถ้าเราต้องการอ้างอิง Attribute ตัวไหนก็แค่เพียงใส่ชื่อ Attribute ตัวนั้นลงไปใน [] วงเล็บก้ามปู เช่น ตัวอย่างในไฟล์ exp.html
<div name= “1” title= “hello-div div”></div>
<p name= “2” title= “p hello”></p>
<span name= “3” title= “hello”></span>
<div name= “4” title= “hello div”></div>
<div name= “5” ></div>
และใน style.css ดั่งต่อไปนี้
[title]{
color=red;
}
ซึ่งผลลัพธ์ที่ได้ก็จะมีผลแค่กับ Element เพียง 4 ตัวที่มี Attribute title อยู่เท่านั้น นั่นก็คือ div , p , span และ div
และเราสามารถประกาศ Element + Attribute ได้ด้วยเช่นกันครับตามนี้เลยครับ
div[title]{
color=red;
}
ก็คือการนำชื่อ element ที่ต้องการไปไว้ด้านหน้า วงเล็บก้ามปูครับ และผลลัพธ์ที่ได้ก็คือ
<div name= “1” title= “hello-div div”></div> //ตัวนี้ครับ
<p name= “2” title= “p hello”></p>
<span name= “3” title= “hello”></span>
<div name= “4” title= “hello div”></div> // และก็ตัวนี้ครับ
<div name= “5” ></div>
จากผลลัพธ์ที่ได้ก็จะมีตัวที่ 1 และ 4 ครับ เพราะมันเป็น div ที่มี attribute title ตรงกับที่ประกาศไว้ครับ และนอกจากนี้เรายังสามารถประกาศอิงตามค่าภายใน Attribute ได้ด้วยครับเช่น
[title=“hello”]{
color=red;
}
ซึ่งจาก CSS ตัวดังกล่าวผลลัพธ์ที่ได้คือ
<div name= “1” title= “hello-div div”></div>
<p name= “2” title= “p hello”></p>
<span name= “3” title= “hello”></span> // ตัวนี้ตัวเดียวเลยครับ
<div name= “4” title= “hello div”></div>
<div name= “5” ></div>
จากผลลัพธ์ที่ได้ก็คือตัวที่ 3 เลยครับ เพราะเราระบุว่าค่าของ title คือ hello ซึ่งจะเห็นว่ามีหลายตัวที่มี hello แต่จากวิธีเขียนดังกล่าวจะหมายถึง ค่าตรง ๆ เท่านั้นครับ ซึ่งยังมีวิธีเรียกอีก 4 แบบครับสำหรับการประกาศ Selector ของ Attribute
1.) คือการใส่ ~ ไว้หน้าเครื่องหมาย = ใน selector ครับ ( สำหรับคนที่สงสัยว่าจะกด ~ ตัวนี้ยังไงก็มี 2 วิธีครับอย่างแรกที่ผมใช้บ่อย ๆ คือกด Alt ค้างไว้ แล้วกดเลข 126 ครับ หรืออีกวิธีนึงที่ดูเป็นสากลหน่อยคือกดปุ่ม Shift ค้างไว้ และปุ่มเปลี่ยนภาษาค้างไว้ครับ เอิ่ม กดสองปุ่มค้างไว้เลยละกันนั่นล่ะครับ ) ซึ่งเครื่องหมายนี้ใช้ตรวจสอบว่าใน attribute ดังกล่าวมีค่าที่ระบุไหม และถ้ามีคำ ๆ นั้นต้องไม่ติดกับคำ ๆ อื่น ถ้ามีคำ ๆ อื่นอยู่ด้วยต้องมี white space คั่นกลางระหว่างครับอย่างเช่น
[title~=“hello”]{
color=red;
}
และผลลัพธ์คือ
<div name= “1” title= “hello-div div”></div>
<p name= “2” title= “p hello”></p> // ตัวนี้นะครับ
<span name= “3” title= “hello”></span> // แล้วก็ตัวนี้
<div name= “4” title= “hello div”></div> // แล้วก็ตัวนี้ครับ
<div name= “5” title= “divhello”></div>
จากผลลัพธ์ที่ได้จะมีตัวที่ 2-4 เท่านั้นที่ตรงกับ Selector ที่ประกาศครับ ตัวแรกไม่ตรงเพราะมีเครื่องหมาย - คั่นระหว่างคำแทนที่จะเป็น ช่องว่าง white space ครับ
2.) คือการใส่ | ไว้หน้าเครื่องหมาย = ครับ ( ไม่ใช่ตัว L นะครบ ปกติแล้วเครื่องหมายนี้จะอยู่ข้าง ฅ ครับ) ซึ่งเครื่องหมายนี้ใช้ตรวจสอบว่าใน attribute ดังกล่าวมีค่าที่ระบุไหม และถ้ามีคำ ๆ นั้นจะต้องอยู่เป็นคำแรก ถ้ามีคำอื่น คำอื่น ๆ ต้องต่อท้ายคำดั่งกล่าวโดยมีเครื่องมาย - คั่นกลางระหว่างคำที่ระบุกกับคำที่ต่อท้ายครับ เช่น
[title|=“hello”]{
color=red;
}
และผลลัพธ์คือ
<div name= “1” title= “hello-div div”></div> //ตัวนี้เลยครับ
<p name= “2” title= “p hello”></p>
<span name= “3” title= “hello”></span> // แล้วก็ตัวนี้
<div name= “4” title= “hello div”></div>
<div name= “5” title= “divhello”></div>
ซึ่งจากผลลัพธ์ที่ได้ก็คือตัวแรกและตัวที่ 3 ครับ ซึ่งตัวที่ 2 ไม่ตรงเพราะคำว่า hello ไม่ใช่คำแรกครับ ส่วนตัวที่ 4 ถึงแม้ว่า hello จะอยู่คำแรกแล้วแต่ไม่มีตัว - คั่นกลางระหว่างคำจึงทำให้ไม่ตรงตาม selector ที่ประกาศครับ
3.) คือการใส่ $ ไว้หน้าเครื่องหมาย = ครับ ซึ่งเครื่องหมายตัวดังกล่าวไว้ตรวจสอบว่ามีคำที่ระบุไหม ถ้ามีแล้วคำดังกล่าวอยู่เป็นคำสุดท้ายหรือเปล่าครับ เช่น
[title$=“hello”]{
color=red;
}
และผลลัพธ์ที่ได้ก็คือ
<div name= “1” title= “hello-div div”></div>
<p name= “2” title= “p hello”></p> // ตัวนี้เลยครับ
<span name= “3” title= “hello”></span> //ตัวนี้ครับ
<div name= “4” title= “hello div”></div>
<div name= “5” title= “divhello”></div> //ตัวนี้ครับ
ซึ่งจากผลลัพธ์ที่ได้ ก็คือตัว 2 3 และ 5 ครับ ซึ่งตัวที่ไม่ตรงคงไม่ต้องอธิบายเนอะ เห็น ๆ กันอยู่ และเราจะเห็นได้จากตัวที่ 5 ด้วยครับว่า คำนี้อยู่ต่อท้ายจริง ๆ โดยถ้าติดกับคำอื่นก็ติดได้เลยไม่ต้องมีอะไรคั่นกลางครับ
4.) คือการใส่ * ไว้หน้าเครื่องหมาย = ครับ ซึ่งเครื่องหมายนี้จะตรวจสอบหาคำดังกล่าวว่ามีไหมครับ ไม่สนว่าอยู่ตรงไหนหรือติดกับใครครับเช่น
[title*=“hello”]{
color=red;
}
ซึ่งผลลัพธ์ที่ได้ก็คือทุกตัวเลยครับเพราะ ทุกตัวมีคำว่า hello อยุ่ใน title ครับ
สำหรับบทความหวังว่าจะเป็นประโยชน์สำหรับผู้ที่เพิ่งเริ่มเขียน CSS ไม่มากก็น้อยนะครับ และสำหรับบทความจะกลับมาในปีใหม่นะครับ พร้อมกับ Properties ของ CSS พื้นฐานครับผม
