Tag: selector

มื่อต้องเจอการแก้ไข CSS หลายคนอาจจะเคยพบเจอ !important ทุกที่มาแล้ว เพราะไม่รู้จะแก้ปัญหายังไง เขียน CSS เพิ่มเข้าไปแล้วหน้าตามันก็ไม่เปลี่ยนสักที การเขียน CSS แบบเก่ามันอ้างอิงจากการไล่อ่าน Selector ที่ถูกโหลดเข้ามาต่อกันเรื่อยๆ แล้วปัญหามันจะเริ่มเกิดเมื่อไฟล์ CSS มันยาวมากเกินไปจนหาที่แก้ไม่ถูก สุดท้ายก็จิ้มเอาตรง Inspect ที่บราวเวอร์แล้วก็ซัด !important ลงไปเลย

หลายปีก่อนก็เริ่มมี CSS Preprocessor เข้ามาอย่าง Sass หรือ Less ก็พอจะทำให้เหล่ามหาเทพ Front-End Dev ทำงานง่ายขึ้นมาได้บ้าง แต่ยังติดปัญหากับผู้ที่เริ่มเขียน CSS HTML หรือเหล่ามือใหม่ทั้งหลายที่ต้องติดตั้งของเยอะแยะก่อนจะเริ่มเขียนได้ CSS Nesting ก็เข้ามาช่วยแก้ปัญหาตรงนี้

CSS Pseudo-classes ที่อยู่ในจำพวก Structural pseudo-classes นั้นมีหลายตัวด้วยกัน แต่วันนี้ ผมขอพูดถึงตัวพื้นๆ ใช้ง่ายๆ และน่าจะได้นำมาใช้บ่อยๆ กันก่อนนะครับ
Structural pseudo-classes มีไว้ใช้ในกรณีที่ Simple Selectors และ Combinators Selectors นั้นไม่สามารถนำมาใช้งานได้ เพราะฉะนั้น ในการเลือกใช้งานอย่างเหมาะสมตามความสามารถของภาษาก่อนเป็นอันดับแรก เช่น ถ้าหากเราจะสั่งงาน HTML บางชุดการใช้งาน ให้เริ่มคำนึงถึง Simple Selectors อื่นๆ ก่อน

ปัญหาจะตามมาตรงนี้ เพราะ คนทำงานมันยังไม่รู้ว่า Simple Selectors มันคืออะไรกันวะ หน้าตาเป็นยังไง ถ้าอย่างนั้น เอาอย่างนี้ ผมจะขอไกด์ไลน์ ให้พอเป็นอีโนให้ เช่น สมมุติว่าเรามีกลุ่ม HTML กลุ่มหนึ่ง เราจะเขียน CSS จัดการ ให้เริ่มลำดับการเลือกที่

1. Type Selector
2. Universal Selector
3. Attribute Selectors
4. Class selectors (อันนี้ได้ข่าวว่า ชาวไทยผู้คลั่งชาติ ชอบใช้กันมาก)
5. ID Selectors (อันนี้ หลายคนก็ยังไม่รู้ว่ามันต่างจาก อันด้านบนยังไง และเลือกใช้งานยังไงอีก)
6. พอมาถึงตรงนี้ ถ้ายังเลือกหา Selectors ที่เหมาะสมเพื่อจะจัดการกับ HTML ของเรายังไม่ได้ ให้ข้ามไปที่ Combinators Selectors โดยเริ่มที่การเลือก Descendant Combinator ก่อน ถ้ายังไม่ได้ ให้ไป
7. Child combinators
8. Sibling combinators โดยในนี้ มี 2 อันให้เลือกใช้คือ Adjacent sibling และ General sibling
9. ถ้าลูกค้าเร่งงานมาด่วนมาก คิดไม่พบ ว่าอะไร เป็นยังไง ให้ทำงานหาเงินก่อน อย่าเพิ่งคำนึงถึง 8 ข้อด้านบนมาก เดี๋ยวจะไม่มีเงินกินข้าว

เคยคิดหนักเรื่องการแบ่งหน้าเว็บออกเป็นหลายๆ สดมภ์กันไหมครับ ไม่ว่าจะ สอง สาม สี่ หรือห้า เมื่อเราต้องการแบ่งหน้าเว็บทีไร ต้องมาเขียน CSS
ใหม่ทุกที แต่วิธีที่ผมจะแนะนำต่อไปนี้ มันต้องมีข้อแม้ และไม่ต้องไป ค้นหาว่า มี ”ฝรั่ง” ที่ไหนเคยทำ หรือ พาทำ หรือไม่ ถึงมีจริง ผมก็ไม่รู้ว่าอยู่ตรงไหน

การตั้งค่าการการแบ่ง สดมภ์ อย่างเป็นมาตรฐาน เราสามารถเขียน CSS แค่ไม่กี่บรรทัด ก็ทำได้แล้ว แต่สิ่งที่เราจำเป็นต้องรู้คือ การเขียน CSS Selector ในหมวดหมู่ Attribute
Selector โดยเฉพาะ อย่างยิ่ง CSS Substring matching attribute Selector ถ้าใครยังไม่รู้ว่าเขียนยังไง ก็ลองค้นๆ หาเอาใน ThaiCSS นี่แหละครับ ผมเขียนไว้หลายแบบอยู่และนานมาแล้ว

Selectors ที่ต้องใช้ในการนี้มีทั้ง Child Selector และ Attribute Selector

การเขียน CSS สำหรับ XHTML selector ใน css ไฟล์นั้นเหมาะกับการใช้ในกรณีที่เราต้องการ ควบคุมการแสดงผลร่วมกันในหลายๆ หน้าของเว็บเช่น การสั่ง body หรือ การสั่ง IMG การเขียน css แบบ External ที่สำคัญเราควรกำหนดค่า body, img, Pseudo-classes, table,td และอื่นๆ ที่เราต้องการไว้ก่อน

เช่น ถ้าเราเขียน

body { 
background-color: #000000;
} 
img {
border: 0;
} 

เมื่อเรานำ ไฟล์ css ไปใช้กับหน้าเว็บใดๆ แล้ว จะได้ค่า พื้นหลังของทุกหน้าเป็นสี #000000 และภาพทุกภาพที่มีอยู่ในแต่ละหน้า จะไม่มี เส้นขอบ และเมื่อเราไปใช้ tag <img src="" alt=""> เราไม่ต้องกำหนด border="0" ในแทกอีกที เพราะ css จัดการให้เรียบร้อยแล้ว และวิธีการกำหนด IMG ให้ border: 0; ใน css ไฟล์ลักษณะนี้ นอกจากจะช่วยไม่ให้ต้องเขียน border="0" ใน html แล้ว เวลาที่เราทำลิงค์จากภาพ ใน IE ก็จะไม่ปรากฎ ขอบสีน้ำเงินขึ้นด้วยครับ

Selector

คือส่งแรกที่สุดที่ควรรู้ แล้วคืออะไรหว่า ชื่อคลาส ชื่อไอดี หรือ [X]HTML tag ใดๆ ใน CSS นั้น เรียกว่า Selector ครับ

โดย คลาส นั้นใช้ . (ดอท) ในการบ่งบอกว่าเป็นคลาส ส่วน ไอดี นั้นใช้ # (ชาร์พ) เป็นตัวบอกว่านี่คือไอดีนะ ส่วน html tag หรือ ใส่มันลงไปโต้งๆ เลยครับ เช่น body (ส่วนของ body) หรือ img (รูปภาพ)

Property

คือชื่อคุณสมบัติของ css เช่น width, height, position ฯลฯ

Values

คือค่าของ property นั้นๆ ครับ เช่น 500px สำหรับความกว้าง