การเขียน Attribute Class อย่างสื่อความหมาย

บางคน หรือหลายคน หรือส่วนใหญ่ เอาเป็นว่าส่วนใหญ่แล้วกันครับ สำหรับคนที่รู้สึกด้วยตังเองแบบไม่อ้างตนว่าเขียน HTML เป็น คงรู้กันว่า class ของ HTML ไม่ได้เอาไว้ให้ CSS ใช้งานเป็นหลัก

class ของ HTML คือภาษา HTML ไม่เกี่ยวกับภาษา CSS ภาษา CSS นั้นมาขอใช้งานภาษา HTML ด้วยการสั่งงานผ่าน HTML Attribute ที่ชื่อ class เท่านั้น และหรือในกรณีเดียวกัน CSS ก็ขอเอี่ยวกับ Attribute id ของ HTML ไปด้วย

อย่างที่บทความก่อนหน้านี้เรื่อง class ที่ รดิส ได้เขียนเอาไว้ เรื่อง "attribute class และ การใช้งานอย่างถูกต้อง" class ของ HTML มีเอาไว้เพื่อจำแนก "ของที่มีอยู่ในหน้าเอกสาร ที่มีพฤติกรรมแบบเดียวกัน" ส่วน id มีเอาไว้เรียกชื่อเพื่อระบุการมีตัวตอนของ ของ แต่ละชิ้น เช่น ในห้องเรียนชั้น ม.5 ห้อง 5/3 มีเด็กแนวกลุ่มหนึ่ง ชื่อ "เกรียนเมพ" ในกลุ่มนั้น มีนักเรียนชาย5 คน นักเรียนหญิง 5 คน ถ้าเรามาเขียน HTML ก็จะจำแนกออกเป็นสอง classes คือ class="นักเรียนชาย" และ class="นักเรียนหญิง"

ถ้าเราจะระบุ การเรียกชื่อกลุ่มนี้ เราจะเรียกกลุ่มนี้ว่า "เกรียนเมพ" สังเกตว่า คำว่า "เกรียนเมพ" คือ คำที่ใช้เรียกแทนชื่อของ คน สัตว์ หรือสิ่งของ มันคือ "คำสรรพนาม" ภาษาไทยเรียนกันมาแล้วใช่ไหมครับ เพราะฉะนั้น ID มันก็คือ คำสรรพนามที่เราใช้เรียกชื่อกลุ่มนั่นเอง เด็กกลุ่มนี้ ก็จะได้ ID เป็น id="เกรียนเมพ"

ซึ่ง ทั้งการเขียน class และ id ไม่ได้เกี่ยวกับ css เลยแม้แต่น้อย การแยกแยะอย่างนี้ นำไปใช้ประ โยชน์ตรงไหน ในทาง XML หรือ JAVA เอง สามารถระบุเฉพาะ class เพื่อนำข้อมูลที่มีอยู่ใน class นั้นๆ ไปใช้งานอย่างอื่นได้โดยตรง มันคือการสร้างสะพานเชื่อมในหารสื่อสารระหว่างข้อมูลถึงข้อมูล

 <section  id="เกรียนเมพ">
    <header>
        <h1>กลุ่มเกรียนเมพ  เทพมาก</h1>
        <h2>รายชื่อนักเรียนชั้น  ม.5/3 ที่อยู่ในกลุ่มได้แก่</h2>

    </header>
    <ul>
        <li  class="นักเรียนหญิง">สมหญิง</li>
        <li  class="นักเรียนชาย">สมาน</li>

        <li  class="นักเรียนชาย">สมภาร</li>
        <li  class="นักเรียนหญิง">ราตรี</li>
        <li  class="นักเรียนชาย" >ศรายุทธ</li>

        <li  class="นักเรียนหญิง">นัทนันท์</li>
        <li  class="นักเรียนหญิง">นุจรี</li>
        <li  class="นักเรียนชาย">วิถี</li>

        <li  class="นักเรียนหญิง">ดวงใจ</li>
        <li  class="นักเรียนชาย">สมชาย</li>
     </ul>
 </section> 

 

กลับไปที่เด็กนักเรียนกลุ่ม "เกรียนเมพ" กันต่อ ถ้าสมมุติว่าวันนั้นพอดี ครูฝ่ายปกครองเดินเข้ามา แล้วเดินไปชี้ตัวแล้วบอกว่า คนนั้นคนนี้ สักลาย บ้างจะเป็นอย่างไร

เราสามารถ เพิ่มการจำแนกรายการเหล่านี้เข้าไปได้ ด้วยการขีดคั่นกลาง (-) ต่อจากชื่อ class ที่เราได้เขียนไว้แล้ว เช่น <li class="นักเรียนชาย-สักลาย" >ศรายุทธ</li> หรือ ดูรูปแบบการเขียนแบบเต็มๆ

เราสมารถเขียน HTML ได้เป็น

 <section  id="เกรียนเมพ">
    <header>
        <h1>กลุ่มเกรียนเมพ  เทพมาก</h1>

        <h2>รายชื่อนักเรียนชั้น  ม.5/3 ที่อยู่ในกลุ่มได้แก่</h2>
    </header>
    <ul>
        <li  class="นักเรียนหญิง">สมหญิง</li>

        <li  class="นักเรียนชาย">สมาน</li>
        <li  class="นักเรียนชาย">สมภาร</li>
        <li  class="นักเรียนหญิง">ราตรี</li>

        <li  class="นักเรียนชาย-สักลาย" >ศรายุทธ</li>
        <li  class="นักเรียนหญิง">นัทนันท์</li>
        <li  class="นักเรียนหญิง">นุจรี</li>

        <li  class="นักเรียนชาย">วิถี</li>
        <li  class="นักเรียนหญิง-สักลาย">ดวงใจ</li>
        <li  class="นักเรียนชาย">สมชาย</li>

     </ul>
 </section> 
 

เราจะได้ นักเรียนที่ผ่านสงครามห้าแถวหลังไหล่ซ้ายมาทั้งสิ้น 2 คน คือ ศรายุทธและดวงใจ

ซึ่งถ้าการเขียน HTML จบแค่นี้ก็พอเพียงแค่นี้ ต่อไปก็ถึงคราวคนเขียน CSS จะต้องตามมาเขียน CSS เพื่อแต่งหน้าศพ เพิ่มความสวยความงามให้กับหน้าเอกสาร ก็เดินดุ่มๆ มาอ่านเอกสารก่อน HTML เขาเขียนไว้แล้วอย่างถูกต้อง อย่ามาแก้ของเขาหละ เดี๋ยวทีมพัฒนาอีกทีมหนึ่งมาตามหาไม่เจอ

ถ้าสมมุติผมเขียน CSS ให้เอกสารแสดงผลออกมาแบบนี้

ภาพตัวอย่างการแสดงผลของการเขียน css ควบคุมผ่าน Attribute class ของ HTML

ก่อนที่จะดูวิธีการเขียน อย่าลืม คลิ๊กไปดูตัวอย่างการแสดงผลก่อนนะครับ ได้ทุกบราวเซอร์ ยกเว้น IE แม้แต่ IE8 ก็ใช้ไม่ได้นะครับ

ในหน้าตัวอย่างนั้นผมเขียนด้วย HTML5 และ CSS3 แบบ :nth-child, :nth-last-child ผสมการใช้งาน Color module แบบ RGBa ซึ่ง a ตัวที่ห้อยมานั่นคือ alpha คือค่าโปรงแสงครับ และ ผมขอข้ามคำสั่งธรรมดาที่เราคุ้นเคยไปนะครับ เช่น type selector

	
    section,header {
	display: block;
}
    

จริงๆ แล้ว section และ header นั้น ค่าปกติที่โรงงานผลิตออกมา มันแสดงผลเป็น Block Element อยู่แล้ว แต่ในเวลานี้ HTML5 ยังไม่ประกาศใช้จริง ผมเลยของสั่งมันแสดงเป็น block ไปก่อน

	
section[id="เกรียนเมพ"] {
	padding: 10px;
	background: rgba(247, 148, 29, 0.3);
	border: solid 2px rgba(247, 148, 29, 1.0);
	width: 400px;
	margin: 0 auto;
}
section[id="เกรียนเมพ"]>ul > li {
	padding: 2px 0 2px 5px;
	border-bottom: solid 1px rgba(247, 148, 29, 0.8);
	position: relative;
	list-style-type: none;
}
    

section[id=”เกรียนเมพ”] คือ ให้กระทำการใดๆ กับ section ที่มี id เท่ากับ "เกรียนเมพ" ส่วน section[id=”เกรียนเมพ”]>ul> li คือ ให้กระทำการใดๆ li ทั้งหมด ที่เป็นลูกของ ul ซึ่ง ul นั้นเป็นเฉพาะลูกของ section อีกทอดหนึ่ง นั่นหมายความว่า ถ้ามี li หรือ ul มาซ้อนเข้าไปใน li คำสั่งนี้จะไม่ทำงาน เพราะสั่งแค่ลูก ไม่สั่งหลาน

	
section[id="เกรียนเมพ"]>ul > li:first-child {
	border-top: solid 1px rgba(247, 148, 29, 0.8);
}
 

section[id=”เกรียนเมพ”]>ul > li:first-child หมายถึง ให้กระทำการใดๆ กับ li ที่เป็นลูกคนแรกของ ul

	
section[id="เกรียนเมพ"]>ul > li[class^="นักเรียนชาย"]:before {
	content: "นาย";
}
 

section[id=”เกรียนเมพ”]>ul > li[class^=”นักเรียนชาย”]:before หมายถึง ให้กระทำการใดๆ กับ li ที่มี class ที่ขึ้นต้นด้วยคำว่า "นักเรียนชาย" ซึ่งใน property ของ combination selector นี้ ผมสั่งให้มี :before เข้าไปด้วย นั่นก็คือ ก่อนหน้าที่จะแสดงข้อมูล ให้เพิ่มค่าที่อยู่ใน property content เข้าไปด้วย นั่นก็คือคำว่า "นาย" จึงมีคำว่า "นาย" โผล่เข้ามาทั้งๆ ที่ไม่ได้เขียน กนณีเดียวกับ กับคำว่า "สักลาย" แต่คำนั้นผมใช้ :after

	
section[id="เกรียนเมพ"]>ul > li:nth-child(10n+2) {
	font-style: italic;
}
 

section[id=”เกรียนเมพ”]>ul > li:nth-child(10n+2) nth ย่อมาจาก notation represent of an element that has ซึ่งก็ตรงตามความหมาย li:nth-child(10n+2) ก็คือคำสั่งที่บอกว่า ให้กระทำการอะไรกับ li ที่เป็นตัวที่ 2 จากทั้งหมด 10 ตัว ในตัวอย่างจึงเห็น "สมาน" แสดงผลเป็นตัวเอียง

	
section[id="เกรียนเมพ"]>ul > li:nth-last-child(-n+2) {
	font-style: italic;
}
 

section[id=”เกรียนเมพ”]>ul > li:nth-last-child(-n+2) เอาหละ มี บวก ก็ต้องมีลบ บวก นับเดินหน้า เพราะฉะนั้น ลบ มันก็ต้องนับถอยหลัง ในคำสั่งนี้มันเป็น li:nth-last-child(-n+2) คือ ลาสไชลด์ ลบ สอง หรือแปลบ้านๆ ลูกคนสุดท้อง ย้อนมารวมกับคนก่อนหน้าอีกคนหนึ่ง คือ มีสองอัน นับรวมจากด้านล่าง เราจึงเห็น li สองอันล่างสุด กลายเป็นตัวเอียง

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

CSS ง่ายนิดเดียวครับ HTML ยากกว่าเยอะ อ้าว ใครเขียน HTML เป็นบ้าง ยกมื้อขึ้น!!

มีความสุขกับการใช้ชีวิตครับ