การทำงานของคำสั่ง CSS : Pseudo – Classes : nth – child(n) คืออะไร

24 สิงหาคม 2559 22:11 น.

การทำงานของคำสั่ง CSS :Pseudo Classes : nth child(n) คืออะไร

                   มาสนุกกันต่อกับการเรียนรู้คำสั่ง CSS หากมีความฝันอยากเป็นโปรแกรมเมอร์มืออะไร อยากเขียนเว็บไซต์ได้ด้วยตนเอง อยากเข้าใจภาษา CSS HTML ต้องเปิดใจก่อนเลยเป็นอันดับแรก เพราะว่าเรื่องเหล่านี้มันไม่ได้มีแต่ความสนุกแต่ยังมีความซับซ้อนซ่อนอยู่อีกมากมายหากใจไม่ถึงจริง ๆ หลายคนก็ถอดใจไปกลางทางก็มี บทนี้เรามาในเรื่องของ CSS :Pseudo Classes : nth child(n) หลายคนอาจจะรู้จักแล้ว แต่สำหรับมือใหม่หลายคนอาจจะยังมึน ๆ กันอยู่มันทำหน้าที่อะไร ทำงานอย่างไรในหน้าเว็บวันนี้เรามาไขความลับให้กระจ่างไปพร้อมกันเลย 

คำสั่ง CSS :Pseudo Classes : nth child(n) คือ ?

คำสั่งนี้ใช้สำหรับการเลือก “ลำดับที่” ซึ่งเราสามารถกำหนดค่าได้เองว่าต้องการให้จุดไหนเป็นอย่างไร อยากให้อักษรมีขนาดใหญ่แค่ไหน  อยากให้มันเป็นสีอะไรในเอลาเมนต่าง ๆ ที่เลือก เพื่อความเข้าใจลองดูตัวอย่าง CSS Code ด้านล่างนี้ประกอบได้เลย เป็นการทำให้ Element ลำดับ 5 ใน ID Post ตัวใหญ่ และ เป็นสีเขียว ดังนี้

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

 

แต่ถ้าหากว่าเลือกเป็น Tag h1 ที่อยู่ในลำดับที่ 5 ใน ID Post มันจะไม่แสดงผลแม้เราจะเขียนคำสั่งได้ออกมาถูกต้องก็ตาม เพราะว่า ID Post นั้นจะมี nth-child(5) วิ่งอยู่ข้างในมัน คำสั่งมันเหมือนรวนเพราะไม่รู้ว่าตัวไหนคือลำดับที่ 5 ตามคำสั่งของเรากันแน่ ฉะนั้นหากต้องการให้มันแสดงผลจะต้องใช้ Tag p ไม่ใช่ Tag h1 นะ

อยากให้ Tag h1 แสดงผลจะเขียน CSS อย่างไร

       ยังไม่ลดละความพยายามแม้มันจะไม่แสดงผลก็ตาม เอาล่ะเราก็ยังพอทำได้นะหากอยากให้ Tag h1 มันแสดงผลในลำดับที่เรากำหนด ก่อนอื่นเลยนะ ให้นับเลยว่ามันอยู่ลำดับที่เท่าไร จากนั้นก็เขียนดังนี้

 

         โอ้เย้!! ในที่สุดก็เขียนออกมาได้แล้ว แต่ว่ามันเหนื่อยไปมั้ยที่เราจะต้องมานั่งนับลำดับเองแบบนี้ หาทางอื่นที่มันง่ายกว่านี้มั้ย แน่นอนว่ามีอีกคำสั่งของ CSS ที่มาช่วยจัดการเรื่องนี้ได้เดี๋ยวเราค่อยต่อกันในบทความต่อไปในคำสั่ง CSS: nth-of-type(n) สำหรับบทความนี้พอแค่นี้ก่อน เยอะกว่านี้คงตาลายกันพอดี ถ้าอยากเก่งก็ต้องหาที่รับสอนทำเว็บไซต์นะ จะได้เข้าใจเกี่ยวกับ CSS แลพ HTML ทั้งหมดเลย

 

02-138-3515-6